Sharing a store with children with out transitions causes if blocks to linger

[subhog]

Describe the bug

When an if block contains a transition-enabled component that reads from the same store the if block does, the if block will linger after the out transition is finished.

To Reproduce

REPL: https://svelte.dev/repl/8047903b1d964d48bd0662b8f4a392b7?version=3.37.0

This repl contains the simplest conditions I've found so far for this bug to occur. These conditions are as follows:

• External component ("App" in the repl) displays one of tab components based on a store state.
• One of the tabs ("Motion") contains an array of card components ("MotionCard").
• Each card receives the store state as a parameter.
• Each card has an out transition.

To witness the bug, select "Motion" tab in the menu, then move to any other tab. The "Motion" tab will still be visible alongside the correct tab.

Expected behavior

I expect only one of the if blocks to be visible at a time.

• The behavior is correct if we remove the out transition.
• The behavior is correct if we don't pass the store state to card components.
• The workaround I found is to wrap the faulty tab with an additional if block. See the workaround repl: https://svelte.dev/repl/e6bbd620b9a0443ab6e55f1cffcef8d7?version=3.37.0

Information about your Svelte project

REPL was tested in Firefox 88 and Chrome 89 under OSX. Current Svelte version is 3.37.0

Severity

There is a workaround. Without it, the transition system is unusable in this case.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been closed as it was previously marked as stale and saw no subsequent activity.

[OpherV]

@subhog
Ran into the same issue and another solution I came across is adding |local to the out animation.
e.g.

<div
  in:fly="{{ y: -100, duration: 200 }}"
  out:fly|local="{{ y: 100, duration: 200 }}"
>

See another workaround repl:
https://svelte.dev/repl/96299ab9374448b2a997877e073ae23e?version=3.37.0