A Vue.js plugin for easily animating `v-for` rendered lists.
Clone or download
Latest commit 87f814e Sep 29, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE add LICENSE file Jun 6, 2016
README.md Update README.md Sep 29, 2016
example.html update example copy Feb 18, 2016
package.json 1.0.2 Feb 18, 2016
vue-animated-list.js Fix performance issue in applyMoveTransition (#6) Sep 22, 2016

README.md

vue-animated-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 v-for rendered lists.

Live Demo

Compatibility: IE10+.

Installation

  • With Modules

    // ES6
    import Vue from 'vue'
    import VueAnimatedList from 'vue-animated-list'
    Vue.use(VueAnimatedList)
    
    // ES5
    var Vue = require('vue')
    Vue.use(require('vue-animated-list'))
  • <script> Include

    Just include vue-animated-list.js after Vue itself.

Usage

There's nothing you need to do in JavaScript except for installation. In your markup, make sure the v-for has a transition attribute:

<div v-for="item in items" transition="item">
  {{ item.text }}
</div>

Now, all you need to do is define the .item-move 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 transform property. So make sure when .item-move is applied its transform property is transition-enabled.

  2. Move animations can only work on elements, so it doesn't work for <template v-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!

License

MIT