Components

Transitions

Vue's <Transition> and <TransitionGroup> with AnimeJS enter, leave and move animations.

<AnimeTransition> and <AnimeTransitionGroup> work like Vue's <Transition> and <TransitionGroup>, with AnimeJS running the animations instead of CSS classes. Vue's transition events, such as @after-enter, and its modes pass through.

Usage

<AnimeTransition> is a drop-in for Vue's <Transition>. It takes one child, toggled by v-if, v-show or a changed key:

<template>
  <AnimeTransition>
    <div v-if="show" />
  </AnimeTransition>
</template>

With no props, the element fades in over 300ms and fades out over 200ms.

Prop	Type	Default	Description
`enterAnimation`	`AnimeTransitionStyleName` or `AnimationParams`	`'fade'`	How the element appears: a style name, or AnimeJS params.
`leaveAnimation`	`AnimeTransitionStyleName` or `AnimationParams`	`'fade'`	How the element disappears: a style name, or AnimeJS params.
`mode`	`'default'`, `'in-out'` or `'out-in'`	`'default'`	Order when one element replaces another. `out-in` waits for the old one to leave before the new one enters.
`appear`	`boolean`	`false`	Run the enter animation on the first render too.
`completeOnTabHidden`	`boolean`	`false`	Jump running animations to their end when the browser tab is hidden.

Style names come from the built-ins and from app.config.ts. See Transition styles. To change a prop's default across the app, see component defaults.

Lists

<AnimeTransitionGroup> animates v-for items that enter and leave. AnimeJS layout slides the other items to their new positions.

View on GitHub

Give the group position: relative. Leaving items switch to position: absolute and are placed against it.

<AnimeTransitionGroup> takes the props below. Its appear and completeOnTabHidden work as on <AnimeTransition>.

Prop	Type	Default	Description
`enterAnimation`	`AnimeTransitionStyleName` or `AnimationParams`	Fade in, 250ms `out(3)`	How items appear: a style name, or AnimeJS params.
`leaveAnimation`	`AnimeTransitionStyleName` or `AnimationParams`	Fade out, 150ms `in(3)`	How items disappear: a style name, or AnimeJS params.
`tag`	`string`	`'div'`	Element rendered around the items.
`moveAnimation`	`AnimeTransitionStyleName`, `AnimeMoveParams` or `false`	`{ duration: 350, ease: 'out(3)' }`	How items move to a new position: a style name, `{ duration, delay, ease }`, or `false` to skip moves.
`absoluteLeave`	`boolean`	`true`	Take leaving items out of the flow as soon as they start leaving, so the rest close the gap while they animate out.
`deps`	`unknown[]`		Values or getters that trigger a move animation when they change, including nested changes.
`shallow`	`boolean`	`false`	Animate only when an entry of `deps` is replaced, not when something nested inside it changes.

The Drive example switches a group between three layouts while its items enter, leave and expand.

Animate only when items move

Without deps, the group measures every element inside it on each re-render, even when nothing moved. Pass deps to measure only when something can move:

ItemList.vue

<template>
  <!-- animates when items are added, removed or reordered -->
  <AnimeTransitionGroup :deps="[]">
    <div v-for="item in items" :key="item.id" />
  </AnimeTransitionGroup>

  <!-- also animates when view resizes the items -->
  <AnimeTransitionGroup :deps="[view]" :class="view">
    <div v-for="item in items" :key="item.id" />
  </AnimeTransitionGroup>
</template>

Performance covers what the measuring costs.

Move elements that are not list items

For a change that is not a list update, such as a card expanding, use <AnimeLayoutGroup> or useAnimeLayout. <AnimeLayoutGroup> also takes deps, but animates only when a deps value changes. Choosing between the two groups compares them.

Finish animations when the tab is hidden

AnimeJS pauses its animations while the browser tab is hidden and resumes them when the tab is visible again. Until then, a leaving element stays half faded. Moving list items stay where they were when the tab was hidden.

Set completeOnTabHidden to jump the component's running animations to their end as soon as the tab is hidden. <AnimeTransition>, <AnimeTransitionGroup> and <AnimeLayoutGroup> all take it. Other animations on the page still pause.

components/ToastHost.vue

<AnimeTransition complete-on-tab-hidden>
  <Toast v-if="open" />
</AnimeTransition>

To turn it on for every instance of a component, set it in component defaults:

app/app.config.ts

export default defineAppConfig({
  nanime: {
    components: {
      transitionGroup: { completeOnTabHidden: true },
      layoutGroup: { completeOnTabHidden: true },
    },
  },
})

Edit this pageorReport an issue

Utilities

AnimeJS helpers re-exported by nanime: easings, utilities, and text and SVG proxies.

Transition styles

The built-in enter and leave styles, and custom ones in app.config.ts.