Vue中的列表過渡

有這樣一個代碼需求：實現一個點擊按鈕，而後在列表中添加並顯示內容

<div id="root">
        <div v-for="(item,index) of list" :key="item.id">
            {{item.title}}
        </div>
        <button @click="handleBtnClick">Add</button>
    </div>
    <script>
        var count = 0
        var vm = new Vue({
            el: "#root",
            data: {
                list: []
            },
            methods: {
                handleBtnClick: function() {
                    this.list.push({
                        id: count++,
                        title: 'hello world'
                    })
                }
            }
        })
    </script>

怎麼在這個代碼的基礎上實現列表過渡的效果呢？

須要使用<transition-group>標籤包裹須要過渡的元素，而後添加動畫樣式：

.v-enter,
.v-leave-to {
     opacity: 0;
}
        
.v-enter-active,
.v-leave-active {
     transition: opacity 1s;
}

<div id="root">
     <transition-group>
          <div v-for="(item,index) of list" :key="item.id">
              {{item.title}}
          </div>
     </transition-group>

     <button @click="handleBtnClick">Add</button>
</div>

原理：<transition-group> 至關於在每個列表項外面加了一層 <transition>，當你在外部加了transiton-group標籤以後，其實裏面就會解析成這樣:

轉換成了對單個元素的過渡動畫