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

Transitions break when wrapped in component. #11657

Open
ptrxyz opened this issue May 16, 2024 · 2 comments
Open

Transitions break when wrapped in component. #11657

ptrxyz opened this issue May 16, 2024 · 2 comments

Comments

@ptrxyz
Copy link

ptrxyz commented May 16, 2024

Describe the bug

If a transition is wrapped into a component, it seems to break (no, |global doesn't fix it).
I have this page:

<script lang="ts">
	import Backdrop from './Backdrop.svelte'

	import { fade } from 'svelte/transition'

	let showTheThing = $state(false)
</script>

<button onclick={() => (showTheThing = !showTheThing)}>Toggle</button>

{#if showTheThing}
	<div transition:fade={{ duration: 2000 }}>
		Element
	</div>
	<Backdrop></Backdrop>
{/if}

with this Component:

<script lang="ts">
	import { fade } from 'svelte/transition'
</script>

<div transition:fade|global={{ duration: 2000 }}>
	Component
</div>

(minimal example here: https://github.com/ptrxyz/svelte5-bug-transitions/tree/main)

Until Svelte5.next.96 this code made it so, that both divs were transitioning the same way. from version 97 onwards, the inwards transition for the wrapped div is not working anymore.

Reproduction

Checkout: https://github.com/ptrxyz/svelte5-bug-transitions/tree/main

  • npm install
  • optional: upgrade Svelte to 135 or down to 97 (version 96) works.
  • npm run dev
  • navigate to localhost:5173/test
  • Hit the button: both div's should transition equally however the green one simply appears.

Logs

No response

System Info

System:
    OS: Linux 6.8 Arch Linux
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 41.44 GB / 62.70 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 20.13.0 - /usr/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.7.0 - /usr/bin/npm
    pnpm: 9.1.1 - /usr/bin/pnpm
    bun: 1.1.4 - ~/bin/bun
  Browsers:
    Brave Browser: 124.1.65.132
  npmPackages:
    svelte: ^5.0.0-next.135 => 5.0.0-next.135

Severity

annoyance

@ptrxyz
Copy link
Author

ptrxyz commented May 18, 2024

Maybe related: #11682

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

No branches or pull requests

2 participants