Transitions
Skeleton provides a simple interface for modifying Svelte component transitions. This supports Svelte-provided transitions, such as: fade, blur, fly, slide, and scale. As well as custom CSS and Javascript transitions.
Look for this indicator on each component page. If present, custom transitions are supported.
Properties
Provide the transition and transition parameters as follows.
Transition In
<ExampleComponent transitionIn={fade} transitionInParams={{ duration: 200 }} />Transition Out
<ExampleComponent transitionOut={fade} transitionOutParams={{ duration: 200 }} />Parameters
You can modify parameters for both the default in and out transitions.
<ExampleComponent transitionInParams={{ duration: 400 }} />Disable Transitions
To disable all transitions for a single component, set transitions to false. This will affect both
the
in
and out transitions.
<ExampleComponent transitions={false}/>Non-Supported Transitions
Note that Svelte provides special crossfade and draw transitions. However these
work and operate in a different manner than standard transition such as fade and fly. These are not supported within
the dynamic transition system at this time.
Reduced Motion
To ensure a better experience for users who are sensitive to motion or have vestibular disorders, Skeleton's default behavior is to disable all transitions when users enable prefers-reduced-motion in their browser settings.
Force Enable
For components with subtle transitions, you may choose to override this behavior by applying a property of transition={true} to the component. We encourage you to use this setting with caution though.
Store
You may utilize prefersReducedMotionStore to access the user's preferred motion setting.
import { prefersReducedMotionStore } from '@skeletonlabs/skeleton';
const userMotionPreference = $prefersReducedMotionStore;