Animation doesn't complete

[kewp]

I have a variable I use to basically fade a component out, and then update, like this:

{#if myvar}
  <Component2 />
{:else}
  <Component2 />
{/if}

I don't know a better way to do this?

Anyway, for some reason at random times the old object stays behind. I'm just hoping someone might have an idea why this might happen? I don't understand how Svelte would implement the above code.

I created a REPL for this https://svelte.dev/repl/aa8de3c5614744838c7e0baeb83fd1c4?version=3.19.1 though I'm not seeing the same behaviour (which would mean you'd see two hello messages).

[MrSrsen]

There are some related issues and I too had this issue:

#3202
#3410

[kewp]

Thanks @MrSrsen that helps me a lot

[pushkine]

this is a css issue
If you want two components to stack on each other you can use the outrostart event to switch their css position property
https://svelte.dev/repl/1cf9e9aae534491a9181dc49c4e520f4?version=3.20.1

[MrSrsen]

this is a css issue

No, issue is that destroy is not called on component (in some cases with animations) and it's causing glitches. It is not CSS issue.

[pushkine]

No, issue is that destroy is not called on component (in some cases with animations) and it's causing glitches. It is not CSS issue.

Sorry I didn't re-read myself before posting
I made a PR regarding the bug you are referring to and wanted to say that the repl provided in this issue works as expected
I felt that there was a reasonable chance that someone could expect transitioning components to stack on each other in this situation so I provided a css solution to achieve that behavior
either way this can be closed

[antony]

@pushkine do you have a link to the PR?

[pushkine]

@antony #4634

[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.