vue-animated-list

by vuejs

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

454 Stars 48 Forks Last release: Not found MIT License 16 Commits 3 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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'))

  • ####
     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:
{{ item.text }}

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

     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

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.