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.
Compatibility: IE10+.
// 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>
IncludeJust include vue-animated-list.js
after Vue itself.
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:
The animation is done using the CSS transform
property. So make sure when .item-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.
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!