demo

demo

by Shuang Zhang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<div id="app">
  <button @click="addOne()">addOne</button>
  <ul>
    <li v-for="person in people" class="animated" transition="fade">
      {{ person.name }}
    </li>
  </ul>
</div>

JavaScript

Vue.transition('fade', {
	enterClass: 'bounceInLeft',
	leaveClass: 'bounceOutRight'
})

new Vue({
	el: '#app',
  data: {
  	people: [
    	{ name: 'Walter' },
      { name: 'Jessie' },
      { name: 'Walt Jr.' }
    ]
  },
  methods: {
  		addOne: function(){
      		var self = this;
      		this.people.push({
          		name: 'Cecile'
          });
          setTimeout(function(){
          		self.people.splice(1,1);
          },2000);
      }
  }
})