README

svelte-transition-extras

npm

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

MIT

Usage no npm install needed!