svelte-trigger-action

A simple utility to trigger CSS animations on elements by calling a function

<script>
    import { createAnimationTriggerAction } from 'svelte-trigger-action';

    // create trigger and action
    const { triggerAnimation, animationAction } = createAnimationTriggerAction();
</script>

<button use:animationAction on:click={() => triggerAnimation('shake')}> shake me </button>

DEMO

The CSS class that defines the animation can be specified in the following places:

1. When creating trigger and action

const { triggerAnimation, animationAction } = createAnimationTriggerAction('shake'); // <- specified here

// in such case, trigger can be called without arguments:
triggerAnimation();

2. As a parameter to action:

<script>
    import { createAnimationTriggerAction } from 'svelte-trigger-action';

    // create trigger and action
    const { triggerAnimation, animationAction } = createAnimationTriggerAction();
</script>

<button use:animationAction={'shake'} onClick={triggerAnimation}> shake me </button>

3. As a parameter to trigger function:

const { triggerAnimation, animationAction } = createAnimationTriggerAction();
triggerAnimation('shake');