FormKit's Auto-animate for Vue

AutoAnimate adds automatic animations to your JavaScript applications with a single line of code. Works with native javascript and your favourite Javascript frameworks (Vue.js, React, Solid, Svelte, Angular)

Installation

Install using your package manager of choice to add @formkit/auto-animate to your project

#yarn
yarn add @formkit/auto-animate

#npm
npm install @formkit/auto-animate

#pnpm
pnpm add @formkit/auto-animate

Usage

AutoAnimate is fundamentally a single function — autoAnimate — that accepts a parent element. Automatic animations will be applied to the parent element and its immediate children. Animations are specifically triggered when one of three events occurs:

  • A child is added in the DOM.
  • A child is removed in the DOM.
  • A child is moved in the DOM.
<script setup>
import { ref, onMounted } from "vue"
import autoAnimate from "@formkit/auto-animate"

const dropdown = ref() // we need a DOM node
const show = ref(false)

onMounted(() => {
  autoAnimate(dropdown.value) // thats it!
})
</script>

<template>
  <div ref="dropdown" class="dropdown">
    <strong class="dropdown-label" @click="show = !show">
      Click me to open!
    </strong>
    <p class="dropdown-content" v-if="show">Lorum ipsum...</p>
  </div>
</template>

Tips to Note

  • It’s still ok to use other kinds of transitions. For example, if you are making stylistic changes with just CSS (such as a hover effect), then use standard CSS transitions for these kinds of styling tweaks.
  • Animations are only triggered when immediate children of the parent element (the one you passed to autoAnimate) are added, removed, or moved.
  • The parent element will automatically receive position: relative if it is statically positioned. Keep this in mind when writing your styles.
  • Sometimes flexbox layouts don’t resize their children immediately. A child with a flex-grow: 1 property waits for the surrounding content before snapping to its full width. AutoAnimate doesn’t work well in these cases, but if you give the element a more explicit width it should work like a charm.

Vue directive

Vue users can globally register the v-auto-animate directive or install the Nuxt module. This makes adding transitions and animations as easy as applying an attribute. Import the Vue plugin from @formkit/auto-animate/vue and register it with your Vue app:

# /main.js
import { createApp } from 'vue'
import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
import App from 'App.vue'

createApp(App).use(autoAnimatePlugin).mount('#app')

Once you’ve registered the plugin, it can be applied anywhere in your application by adding the v-auto-animate directive to the parent element:

# /App.vue
<script setup>
import { ref } from 'vue'
const items = ref(["Hello","Hi","Yello","Hola","Hey", ... ])
function removeItem(toRemove) {
  items.value = items.value.filter((item) => item !== toRemove)
}
</script>

<template>
  <h5>Click emojis to remove them.</h5>
  <ul v-auto-animate>
    <li
      v-for="item in items"
      :key="item"
      @click="removeItem(item)"
    >
      {{ item }}
    </li>
  </ul>
</template>

Vue Composable

You can also try this useAutoAnimate composable as an alternative to the v-auto-animate directive

<script setup>
import { ref } from 'vue'
import { useAutoAnimate } from '@formkit/auto-animate/vue'

const items = ref(["React", "Vue", "Svelte", "Angular"])

function sortAsc() {
  items.value.sort()
}
function sortDesc() {
  items.value.sort().reverse()
}

const [parent] = useAutoAnimate()
</script>

<template>
  <div>
    <button @click="sortAsc">Sort A-Z ↑</button>
    <button @click="sortDesc">Sort Z-A ↓</button>
  </div>
  <ul ref="parent">
    <li
      v-for="item in items"
      :key="item"
    >
      {{ item }}
    </li>
  </ul>
</template>

Get more info on this plugin and demos as well in the official Auto-animate page