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.