Transitions break basic functionality

[arggh]

Sorry for the vague title. It's late.

Using transitions seems to break basic functionality in some circumstances. By basic functionality I mean a simple if clause in the template, like so:

{#if condition}
   <Child/>
{/if}

...where the <Child/> is using transitions.

Reproduction: https://svelte.dev/repl/2e801ddf39f646709a3aa1b74f727f71?version=3.6.5

Instructions (also included in the REPL):

1. Click the button to show the child component
2. Write something in the input to reveal (with an animation) the close-button
3. Click the close button and observe how the app breaks (not closing the child component)

[Conduitry]

This appears to still be present in 3.6.6.

[Conduitry]

If the transition:fly on the div with the button in Child.svelte is changed to an in:fly, this seems to work fine. Having an out:fly also breaks similarly to how transition:fly does.

I'm not sure what this indicates.

[antony]

Still present in 3.16.7

[RedHatter]

I made a minimal repel and traced down the problem.

During the outro svelteIsBroken is updated causing the update function of the fragment to be called which in turn calls transition_in on the if block ending the outro before it's able to remove the component.

p: function update(ctx, [dirty]) {
	if (/*show*/ ctx[1]) {
		if (if_block) {
			if_block.p(ctx, dirty);
			transition_in(if_block, 1);
                ....

i: function intro(local) {
	if (current) return;
	if (div_outro) div_outro.end(1);
	current = true;
},

I've made a few simple attempts to solve it without success. I'm not sure how to fix this short of disabling the outro's ability to be canceled all together.

@Conduitry Any ideas? Or should we give Rich a ping?

Edit: I should mention that this issue is a blocker at my work.

[kewp]

Would a basic fix then be to not use any out transitions?

[antony]

I believe that the fix is the same as the fix for https://github.com/sveltejs/sapper/issues/814 where transitions break Sapper's routing. The solution is to use the local modifier on your transitions.

<div transition:fly|local></div>

Updated working repl is here - https://svelte.dev/repl/8bfae7a0389d42f09087298b2e621fd9?version=3.19.2 but also works on 3.6.5.

[Conduitry]

Fixed in 3.21.0 - https://svelte.dev/repl/2e801ddf39f646709a3aa1b74f727f71?version=3.21.0