Svelte Transition Extras
Finer-grained execution over Svelte's built-in transitions
svelte-transition-extras
A set of Svelte transition effects that wrap the built-in transition functions (fade, slide, etc.), allowing for a bit more control over their execution.
Installing
npm install svelte-transition-extras --save
Or, if you're using Yarn:
yarn add svelte-transition-extras
Summary
This library is comprised of two sub-modules:
| Submodule | |
|---|---|
| if | Runs a transition only if the supplied condition property is true |
| once | Runs a transition only once in the app's lifetime, keyed off the supplied id property |
As an example, for conditional transitions:
<script>
import { fade } from 'svelte-transition-extras/if'
export let transitionHeader = true
</script>
<!-- Fade the H1 element in if the component's `transitionHeader` prop is true;
otherwise perform no transition. -->
<h1 in:fade={{ condition: transitionHeader }}>Hello!</h1>
And for a transition that will only run once during the application's lifetime:
<script>
import { fade } from 'svelte-transition-extras/once'
// In order to track elements, an `id` property must be supplied as an
// argument to the transition. When using TypeScript, you'll receive
// an error if it's not supplied.
// The identifier could just as easily be randomnly-generated (a
// v4 UUID should work well enough in most cases)
const h1Id = 'this-component-h1-id'
</script>
<h1 in:fade={{ id: h1Id }}>Hello!</h1>
More details
For more information on the Svelte transition this library wraps, see Svelte's documentation.
Aliases
For convenience -- and to help prevent overlap with Svelte's built-ins -- all the included transitions are also available as aliases in the core svelte-transition-extras package:
| if | once |
|---|---|
| blurIf | blurOnce |
| drawIf | drawOnce |
| fadeIf | fadeOnce |
| flyIf | flyOnce |
| scaleIf | scaleOnce |
| slideIf | slideOnce |
TODO
crossfade!
License
