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标签之后，其实里面就会解析成这样:

转换成了对单个元素的过渡动画