& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title> & lt;/title>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/animate.css "比;
& lt;脚本src=" https://www.yisu.com/zixun/vue.js "祝辞& lt;/script>
& lt; !——& lt;脚本src=" http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js "祝辞& lt;/script>——比;
& lt;/head>
& lt; body>
& lt; div id=案北?//性能考虑,尽量不用指数作为键值& lt; br>
& lt; div v="(项目)名单”:关键=癷tem.id”比;
{{item.title}}
& lt;/div>
& lt;按钮@click=" handBtnClick "祝辞add
& lt;/div>
& lt;脚本type=" text/javascript祝辞
var计算=0;
var vm=new Vue ({
埃尔:“#根”,
数据:{
列表:[]
}，
方法:{
handBtnClick:函数(){
this.list.push ({
id:计数+ +,
标题:“你好”
}）；
}
}
}）；
& lt;/script>
& lt;/body>
& lt;/html> 之前是对单个或多个元素之间做切换动画效果,现在,对一个列表过渡效果,用标签& lt; transition-group>:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title> & lt;/title>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/animate.css "比;
& lt;脚本src=" https://www.yisu.com/zixun/vue.js "祝辞& lt;/script>
& lt; !——& lt;脚本src=" http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js "祝辞& lt;/script>——比;
& lt;风格类型=" text/css "比;/*因为没有给它命的名,所以用默认v开头的类名*/.v-enter .v-leave-to {
透明度:0;
}
.v-enter-active .v-leave-active {
过渡:透明度1 s;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=案北?//性能考虑,尽量不用指数作为键值& lt; br>
& lt; transition-group>
& lt; div v="(项目)名单”:关键=癷tem.id”比;
{{item.title}}
& lt;/div>
& lt;/transition-group>
& lt;按钮@click=" handBtnClick "祝辞add
& lt;/div>
& lt;脚本type=" text/javascript祝辞
var计算=0;
var vm=new Vue ({
埃尔:“#根”,
数据:{
列表:[]
}，
方法:{
handBtnClick:函数(){
this.list.push ({
id:计数+ +,
标题:“你好”
}）；
}
}
}）；
& lt;/script>
& lt;/body>
& lt;/html> 为啥上面的效果是增加的都有渐显效果呢?
用一对& lt; transition-group>标签包裹
& lt; transition-group>
& lt; div> hello
& lt; div> hello
& lt; div> hello
& lt;/transition-group>
相当于每一个都用一对& lt; transition>标签包裹
& lt; transition>
& lt; div> hello
