svelte-transition-action

A svelte action that allows you to use any svelte transition as an action without re-rendering the element.

Installation

npm install svelte-transition-action
# or
yarn add svelte-transition-action

Usage

<script>
    import { fade } from 'svelte/transition';
    import { transition } from 'svelte-transition-action';
  
    let displayed = true;
</script>

<button on:click={() => displayed = !displayed}>Toggle</button>

<h1 use:transition={{ fn: fade, key: displayed, duration: 1000 }}>
    Fade in and out
</h1>

REPL

You can pass any arguments that the transition function accepts.

More examples

<script>
	import { slide } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
	import { transition } from 'svelte-transition-action';

	let displayed = false;
</script>

<button on:click={() => displayed = !displayed}>Toggle</button>

<h1 use:transition={{
		fn: slide,
		key: displayed,
		delay: 250,
		duration: 1000,
		easing: quintOut
}}>
	Slide in and out with delay
</h1>

REPL

Heads up

Not very well tested. Consider it alpha.