Vue.js 列表项淡入淡出动画示例

<div id="app">
  <button @click="add">添加</button>
  <button @click="remove">删除</button>
  <ul>
    <li v-for="(item, index) in list" :key="item.id" v-bind:class="{ 'fade-enter': item.enter, 'fade-leave': item.leave }">{{ item.text }}</li>
  </ul>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    list: [
      { id: 1, text: '第一行', enter: false, leave: false },
      { id: 2, text: '第二行', enter: false, leave: false },
      { id: 3, text: '第三行', enter: false, leave: false }
    ],
    id: 4
  },
  methods: {
    add: function() {
      this.list.push({ id: this.id++, text: '新行', enter: true, leave: false });
      setTimeout(() => {
        this.list[this.list.length - 1].enter = false;
      }, 0);
    },
    remove: function() {
      this.list[this.list.length - 1].leave = true;
      setTimeout(() => {
        this.list.pop();
      }, 500);
    }
  }
});

</script>