<div id="app1">
  <button @click="add">Add</button>
  <button @click="remove">Remove</button>
  <transition-group name="list" tag="p">
    <span v-for="item in items" :key="item" class="list-item">
      {{item}}
    </span>
  </transition-group>
</div>

.list-item{
      display: inline-block;
      margin-right: 10px;
    }
    .list-enter-active, .list-leave-active{
      transition: all 1s;
    }
    .list-enter, .list-leave-to{
      opacity: 0;
      transform: translateY(30px);
    }

var app1 = new Vue({
  el:'#app1',
  data:{
    items:[1,2,3,4,5,6,7,8,9],
    nextNum:10
  },
  methods:{
    randomIndex:function () {
      return Math.floor(Math.random() * this.items.length)
    },
    add:function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove:function () {
      this.items.splice(this.randomIndex(), 1)
    }
  }
})

<div id="app2">
  <button @click="shuffle">Shuffle</button>
  <transition-group name="flip-list" tag="ul">
    <li v-for="item in items" :key="item">
      {{item}}
    </li>
  </transition-group>
</div>

.flip-list-move {
   transition: transform 1s;
}

var app2 = new Vue({
  el:'#app2',
  data:{
    items:[1,2,3,4,5,6,7,8,9]
  },
  methods:{
    shuffle:function () {
      this.items = _.shuffle(this.items)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>

<div id="app3" class="demo">
  <button @click="shuffle">Shuffle</button>
  <button @click="add">Add</button>
  <button @click="remove">Remove</button>
  <transition-group name="list-complete" tag="p">
    <span v-for="item in items" :key="item" class="list-complete-item">
      {{item}}
    </span>
  </transition-group>
</div>

.list-complete-item{
  transition: all 1s;
  display: inline-block;
  margin-right: 10px;
}
.list-complete-enter, .list-complete-leave-to{
  opacity: 0;
  transform: translateY(30px);
}
.list-complete-leave-active{
  position: absolute;
}

var app3 = new Vue({
  el:'#app3',
  data:{
    items:[1,2,3,4,5,6,7,8,9],
    nextNum:10
  },
  methods:{
    shuffle:function () {
      this.items = _.shuffle(this.items)
    },
    randomIndex:function () {
      return Math.floor(Math.random() * this.items.length)
    },
    add:function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove:function () {
      this.items.splice(this.randomIndex(), 1)
    }
  }
})

<div id="app4">
  <input v-model="query">
  <transition-group
    name="staggered-fade"
    tag="ul"
    :css="false"
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave">
    <li v-for="(item, index) in computedList"
      :key="item.msg"
      :data-index="index">
      {{item.msg}}
    </li>
  </transition-group>
</div>

var app4 = new Vue({
  el:'#app4',
  data:{
    query:'',
    list:[
      {msg:'Bruce Lee'},
      {msg:'Jackie Chan'},
      {msg:'Chuck Norris'},
      {msg:'Jet Li'},
      {msg:'Kung Furry'},
      {msg:'Chain Zhang'},
      {msg:'Iris Zhao'},
    ]
  },
  computed:{
    computedList:function () {
      var vm = this
      return this.list.filter(function (item) {
        return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
      })
    }
  },
  methods:{
    beforeEnter:function (el) {
      el.style.opacity = 0
      el.style.height = 0
    },
    enter:function (el, done) {
      var delay = el.dataset.index * 150
      setTimeout(function () {
        Velocity(el, {opacity:1, height:'1.6em'},{complete:done})
      }, delay)
    },
    leave:function (el, done) {
      var delay = el.dataset.index * 150
      setTimeout(function () {
        Velocity(el, {opacity:0, height:0}, {complete:done})
      }, delay)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<div id="app5">
  <input v-model="query">
  <my-transition :query="query" :list="list">
    <li v-for="(item, index) in computedList"
      :key="item.msg"
      :data-index="index">
      {{item.msg}}
    </li>
  </my-transition>
</div>

Vue.component('my-transition', {
  template:`
  <transition-group
    name="staggered-fade"
    tag="ul"
    :css="false"
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave">
    <slot></slot>
  </transition-group>`,
  props:['query', 'list'],
  methods:{
    beforeEnter:function (el) {
      el.style.opacity = 0
      el.style.height = 0
    },
    enter:function (el, done) {
      var delay = el.dataset.index * 150
      setTimeout(function () {
        Velocity(el, {opacity:1, height:'1.6em'},{complete:done})
      }, delay)
    },
    leave:function (el, done) {
      var delay = el.dataset.index * 150
      setTimeout(function () {
        Velocity(el, {opacity:0, height:0}, {complete:done})
      }, delay)
    }
  }
})

var app5 = new Vue({
  el:'#app5',
  data:{
    query:'',
    list:[
      {msg:'Bruce Lee'},
      {msg:'Jackie Chan'},
      {msg:'Chuck Norris'},
      {msg:'Jet Li'},
      {msg:'Kung Furry'},
      {msg:'Chain Zhang'},
      {msg:'Iris Zhao'},
    ]
  },
  computed:{
    computedList:function () {
      var vm = this
      return this.list.filter(function (item) {
        return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
      })
    }
  },
})

<transition v-bind:name="transitionName">
 <!-- ... -->
</transition>

<div id="app6">
  Fade In:
  <input type="range" v-model="fadeInDuration" min="0" :max="maxFadeDuration">
  Fade Out:
  <input type="range" v-model="fadeOutDuration" min="0" :max="maxFadeDuration">
  <transition
    v-bind:css="false"
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave">
    <p v-if="show">hello chain</p>
  </transition>
  <button @click="stop = true">Stop it</button>
</div>

var app6 = new Vue({
  el: '#app6',
  data: {
    show: true,
    fadeInDuration: 1000,
    fadeOutDuration: 1000,
    maxFadeDuration: 1500,
    stop: false
  },
  mounted: function () {
    this.show = false
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
    },
    enter: function (el, done) {
      var vm = this
      Velocity(el,
        { opacity: 1 },
        {
          duration: this.fadeInDuration,
          complete: function () {
            done()
            if (!vm.stop) vm.show = false
          }
        }
      )
    },
    leave: function (el, done) {
      var vm = this
      Velocity(el,
        { opacity: 0 },
        {
          duration: this.fadeOutDuration,
          complete: function () {
            done()
            vm.show = true
          }
        }
      )
    }
  }
})

appear: function (el, done) {
      var vm = this
      Velocity(el,
        { opacity: 1 },
        {
          duration: this.fadeInDuration,
          complete: function () {
            done()
            if (!vm.stop) vm.show = false
          }
        }
      )
    }