Vue学习笔记【21】——Vue中的动画（v-for 的列表过渡）

 

1. 定义过渡样式：

 <style>
     .list-enter,
     .list-leave-to {
       opacity: 0;
       transform: translateY(10px);
     }
 ​
     .list-enter-active,
     .list-leave-active {
       transition: all 0.3s ease;
     }
 </style>

2. 定义DOM结构，其中，需要使用 transition-group 组件把v-for循环的列表包裹起来：

   <div id="app">
     <input type="text" v-model="txt" @keyup.enter="add">
 ​
     <transition-group tag="ul" name="list">
       <li v-for="(item, i) in list" :key="i">{{item}}</li>
     </transition-group>
   </div>

3. 定义 VM中的结构：

     // 创建 Vue 实例，得到 ViewModel
     var vm = new Vue({
       el: '#app',
       data: {
         txt: '',
         list: [1, 2, 3, 4]
       },
       methods: {
         add() {
           this.list.push(this.txt);
           this.txt = '';
         }
       }
     });