-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Closed
Description
Describe the bug
In Svelte 4, you can wrap your transitions in a store and use that store in place of a transition from svelte/transition
. In my case, I'm wrapping fly
and fade
with $accessibleFly
to provide reduced motion transitions based on a (prefers-reduced-motion: reduce)
media query. For instance:
{#if something}
<div in:$accessibleFly={{x: 0, y: -200}}>Hello</div>
{/if}
The same code in Svelte 5 throws ReferenceError: $accessibleFly is not defined
.
Reproduction
This is a working reproduction in Svelte 4
This does not work in Svelte 5
Logs
Error: $accessibleFly is not defined
message: "$accessibleFly is not defined"
stack: "ReferenceError: $accessibleFly is not defined\n" +
" at eval (playground:output:2957:21)\n" +
" at eval (playground:output:1364:6)\n" +
" at execute_signal_fn (playground:output:1826:73)\n" +
" at execute_effect (playground:output:1961:30)\n" +
" at eval (playground:output:1316:9)\n" +
" at execute_signal_fn (playground:output:1826:73)\n" +
" at execute_effect (playground:output:1961:30)\n" +
" at flush_queued_effects (playground:output:2006:7)\n" +
" at process_microtask (playground:output:2025:3)"
System Info
N/A
Severity
annoyance
Metadata
Metadata
Assignees
Labels
No labels