Officially supported transitions plugin for Svelte. Includes the following:
Install with npm or yarn:
npm install --save svelte-transitions
Then add the plugins you need to your Svelte component's exported definition:
<label>
<input type='checkbox' bind:checked='visible'> visible
</label>
{{#if visible}}
<!-- use `in`, `out`, or `transition` (bidirectional) -->
<div transition:fade>hello!</div>
{{/if}}
<script>
import { fade } from 'svelte-transitions';
export default {
transitions: { fade }
};
</script>
If you're using a module bundler that supports tree-shaking, such as Rollup, only the transitions your components use will be included in your app.
If you really need it, a UMD build is available at svelte-transitions/dist/svelte-transitions.js, and will register itself as svelte.transitions
. We recommend using a module bundler instead, however.