Need help with vue-animated-list?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

455 Stars 49 Forks MIT License 16 Commits 5 Opened issues


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

Services available


Need anything else?

Contributors list


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.