by vuejs

A Vue.js plugin for easily animating `v-for` rendered lists.

454 Stars 48 Forks Last release: Not found MIT License 16 Commits 3 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:


NOTE: this plugin is for Vue 1.x only. Vue 2.0 supports moving animations out of the box.

A Vue.js plugin for easily animating

rendered lists.

Live Demo

Compatibility: IE10+.


  • #### With Modules
  // ES6
  import Vue from 'vue'
  import VueAnimatedList from 'vue-animated-list'

// ES5 var Vue = require('vue') Vue.use(require('vue-animated-list'))

  • ####

Just include

after Vue itself.


There's nothing you need to do in JavaScript except for installation. In your markup, make sure the

has a transition attribute:
{{ item.text }}

Now, all you need to do is define the

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

And that's it! You can also add CSS classes for enter and leave transitions - they all work nicely together!

A few things to note:

  1. The animation is done using the CSS

    property. So make sure when
    is applied its
    property is transition-enabled.
  2. Move animations can only work on elements, so it doesn't work for

     and fragment instance components.

How Does It Work?

This is inspired by this great post by Joshua Comeau, which is in turn based on the FLIP technique by Paul Lewis. So read those if you are interested in the technical details!



We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.