Transition styles
A style is a named set of AnimeJS params for enter, leave and move.
Pass its name to the animation props of
<AnimeTransition> and <AnimeTransitionGroup>.
Built-in styles
| Style | Animates | Enter | Leave |
|---|---|---|---|
fade | opacity | 300ms | 200ms |
slide-up | opacity, y 20px | 350ms | 250ms |
slide-down | opacity, y 20px | 350ms | 250ms |
slide-left | opacity, x 20px | 350ms | 250ms |
slide-right | opacity, x 20px | 350ms | 250ms |
scale | opacity, scale 0.85 | 300ms | 200ms |
swap | opacity, y 10px, scale 0.97 | 260ms | 160ms |
Inline params beat a style name, and a name beats the default. A style that does not set the part asked for, or an unknown name, uses the default.
Custom styles
Add your own under nanime.transitions in app.config.ts. Any AnimeJS
param works, including keyframes, filters and eases. This site defines the
six styles in the demo:
export default defineAppConfig({
nanime: {
transitions: {
shake: {
enter: {
opacity: [0, 1],
x: [0, -10, 10, -6, 6, 0],
duration: 500,
ease: 'inOut(2)',
},
leave: {
opacity: 0,
x: [0, 8, -8, 0],
duration: 300,
ease: 'in(2)',
},
},
explode: {
enter: {
opacity: [0, 1],
scale: [0.5, 1],
duration: 350,
ease: 'outBack(3)',
},
leave: {
opacity: 0,
scale: 2,
filter: ['blur(0px)', 'blur(10px)'],
duration: 400,
ease: 'out(3)',
},
},
skew: {
enter: {
opacity: [0, 1],
x: [-24, 0],
skewX: [20, 0],
duration: 450,
ease: 'out(4)',
},
leave: {
opacity: 0,
x: 24,
skewX: -20,
duration: 250,
ease: 'in(3)',
},
},
},
},
})
Use a custom style by name, like a built-in. The editor autocompletes
these names in the animation props. A style with a built-in name, such as
fade, replaces the built-in.
Sequences
Params passed straight to an animation prop take AnimeJS keyframes, so
one leave-animation can chain two hops, a shake and an explode:
<script setup lang="ts">
import type { AnimationParams } from '#nanime/types'
const hopShakeExplode: AnimationParams = {
keyframes: [
{ y: -24, duration: 180, ease: 'out(3)' },
{ y: 0, duration: 150, ease: 'in(3)' },
{ y: -16, duration: 150, ease: 'out(3)' },
{ y: 0, duration: 130, ease: 'in(3)' },
{ x: -8, duration: 70 },
{ x: 8, duration: 90 },
{ x: 0, duration: 70 },
{ scale: 2, opacity: 0, filter: ['blur(0px)', 'blur(10px)'], duration: 400, ease: 'out(3)' },
],
}
</script>
<template>
<AnimeTransition enter-animation="scale" :leave-animation="hopShakeExplode">
<div v-if="show" />
</AnimeTransition>
</template>