<!DOCTYPE html><html><head>    <title></title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <link rel="stylesheet" type="text/css" href="./animate.css">    <script src="./vue.js"></script>    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->    </head><body>    <div id="root">        //性能考虑，尽量不用index作为key值 <br>        <div v-for="(item) of list" :key="item.id">            {{item.title}}        </div>        <button @click="handBtnClick">add</button>    </div>    <script type="text/javascript">        var count = 0;        var vm = new Vue({            el: "#root",            data: {                list: []            },            methods: {                handBtnClick: function() {                    this.list.push({                        id: count++,                        title: "hello"                    });                }            }        });    </script></body></html>

之前是对单个或多个元素之间做切换动画效果，现在，对一个列表过渡效果，用标签<transition-group>：

<!DOCTYPE html><html><head>    <title></title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <link rel="stylesheet" type="text/css" href="./animate.css">    <script src="./vue.js"></script>    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->    <style type="text/css">        /*因为没有给它命名，所以用默认v开头的class名*/        .v-enter, .v-leave-to {            opacity: 0;        }        .v-enter-active, .v-leave-active {            transition: opacity 1s;        }    </style></head><body>    <div id="root">        //性能考虑，尽量不用index作为key值 <br>        <transition-group>            <div v-for="(item) of list" :key="item.id">                {{item.title}}            </div>        </transition-group>        <button @click="handBtnClick">add</button>    </div>    <script type="text/javascript">        var count = 0;        var vm = new Vue({            el: "#root",            data: {                list: []            },            methods: {                handBtnClick: function() {                    this.list.push({                        id: count++,                        title: "hello"                    });                }            }        });    </script></body></html>

为啥上面的效果是增加的都有渐显效果呢？

用一对<transition-group>标签包裹

<transition-group>
    <div>hello</div>

    <div>hello</div>

    <div>hello</div>

</transition-group>

相当于每一个都用一对<transition>标签包裹

<transition>

    <div>hello</div>

</transition>

<transition>

    <div>hello</div>

</transition>

<transition>

    <div>hello</div>

</transition>