Vue animated list - animate lists rendered with v-for

vue-animated-list

Installation

You can install it through modules or via <script> tag. It doesn't require any changes in JavaScript just add a CSS class and you get smooth 60fps animations.

// ES6
import Vue from 'vue'
import VueAnimatedList from 'vue-animated-list'
Vue.use(VueAnimatedList)

<script> Include

include vue-animated-list.js after Vue.

Usage

Define the CSS rules for your transition

.thing-move {
  /* applied to the element when moving */
  transition: transform .5s cubic-bezier(.55,0,.1,1);
}

In your markup, use the v-for directive for the list and give it a transition attribute:

<div v-for="thing in things" transition="thing">
  {{ thing.text }}
</div>

You can also add CSS classes for enter and leave transitions.

A few things to note:

  • The animation is done using the CSS transform property. So make sure when .thing-move is applied its transform property is transition-enabled.
  • Move animations can only work on elements, so it doesn't work for <template v-for> and fragment instance components.

See this plugin's Live Demo and its Github page.