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'))
-
Just 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 itstransform
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!