Navigation Menu

Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug of local transition with keyed clause #5950

Closed
micaste opened this issue Feb 2, 2021 · 7 comments · Fixed by #7286
Closed

Bug of local transition with keyed clause #5950

micaste opened this issue Feb 2, 2021 · 7 comments · Fixed by #7286

Comments

@micaste
Copy link

micaste commented Feb 2, 2021

Is this about svelte@next? This project is currently in a pre-release stage and breaking changes may occur at any time. Please do not post any kind of bug reports or questions on GitHub about it.

No

Describe the bug
When using the {#key } clause, the local transitions do not work well.

To Reproduce

https://svelte.dev/repl/f20a688175914fb2a0f5ff45a75360b5?version=3.32.1

Expected behavior
In the provided REPL, the expected behavior is for the items to enter and exit in a smooth manner, with or without local modifier. It only happens with the keyed clause, and works well with an {#each } clause: https://svelte.dev/repl/b0c3bafb93a6463d81e846d30f80f5ba?version=3.32.1

Information about your Svelte project:

The REPL uses Svelte 3.32.1. Reproduced on Safari 14.0.2 and Chrome 88 on OSX 11.1

Severity
It prevents me from using local transitions in an image carousel: https://strollyn.com/explore . I'd like the transition not to run when mounting or changing page.
Some workarounds are possible (using scroll for the carrousel maybe), but the severity is not that large

@stale
Copy link

stale bot commented Jun 26, 2021

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 stale bot added the stale-bot label Jun 26, 2021
@stale stale bot removed the stale-bot label Jun 26, 2021
@stale stale bot removed the stale-bot label Jun 27, 2021
@ruvkr
Copy link

ruvkr commented Jun 27, 2021

@andrevvm
Copy link

@dennisjlee
Copy link

I'm facing this same issue (also in trying to create a carousel). It seems to me that the |local modifier for transitions should also apply if the element is being rendered due to an immediate parent {#key} re-rendering.

@7nik
Copy link

7nik commented Dec 11, 2021

My test case https://svelte.dev/repl/9ade56926d33497980edd41af6597c70?version=3.44.2
and if you need a workaround, use

{#each [key] as k(k)}
  your code
{/each}

instead of #key block

@Valexr
Copy link

Valexr commented Dec 12, 2021

in:blur={{duration:1000, delay: 1000}} out:blur={{duration:1000}}

bfanger added a commit to bfanger/svelte that referenced this issue Feb 18, 2022
When adding `|local` to a transition inside a {#key} block, only the outro was triggered not the intro.

This PR fixes sveltejs#5950
bfanger added a commit to bfanger/svelte that referenced this issue Feb 21, 2022
When adding `|local` to a transition inside a {#key} block, only the outro was triggered not the intro.

This PR fixes sveltejs#5950
tanhauhau pushed a commit to tanhauhau/svelte that referenced this issue Apr 8, 2022
When adding `|local` to a transition inside a {#key} block, only the outro was triggered not the intro.

This PR fixes sveltejs#5950
tanhauhau added a commit that referenced this issue Apr 16, 2022
* fix: Local transitions from #key blocks

When adding `|local` to a transition inside a {#key} block, only the outro was triggered not the intro.

This PR fixes #5950

* add test case

Co-authored-by: tanhauhau <lhtan93@gmail.com>
@Conduitry
Copy link
Member

This should be fixed in 3.48.0 - https://svelte.dev/repl/f20a688175914fb2a0f5ff45a75360b5?version=3.48.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants