vue列表动画的原理自我理解

有什么效果复制粘贴出去试试

<style>
        .v-enter,
        .v-leave-to {
            opacity: 0;
        }

        .v-enter-active,
        .v-leave-active {
            transition: opacity 1s;
        }
    </style>
<div id="app">
        <transition-group>
            <div v-for='(item,index) in list' :key='item.id'>
                {{item.name}}
            </div>
        </transition-group>
        <input type="button" value="点击试试" @click='clickBtn'>
    </div>
    <script>
        var count = 0;
        var vm = new Vue({
            el: '#app',
            data: {
                list: []
            },
            methods: {
                clickBtn() {
                    this.list.push({
                        id: count++,
                        name: '张三' + ':' + count
                    });
                }
            },
        });
    </script>

必须使用<transition-group>
<transition> 只适合放一个根元素
在给list添加新内容时，根据MVVM的设计风格，页面中会添加一个li标签，新的标签显示时，会经过.v-enter和.v-enter-active这两个class类名