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.
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>IncludeJust include
vue-animated-list.jsafter 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:
-
The animation is done using the CSS
transformproperty. So make sure when.item-moveis applied itstransformproperty is transition-enabled. -
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!