在需要设置动画的标签部分用transition包裹起来。可添加name属性。Vue自动给标签在某个时间点上添加类名。
没有name值，css默认前缀名为"v"
隐藏到展示
开始有fade-enter,fade-enter-active,(第0帧未动)——第1帧fade-enter 去除，新增v-enter-to,周期最后fade-enter-to,fade-enter-active去除。
展示到隐藏
开始有fade-leave,fade-leave-active——第1帧fade-leave去掉，新增fade-leave-to,z最后周期fade-leave-to,fade-leave-active去掉
<style> .v-enter,.v-leave-to{ opacity:0; } .v-enter-active,.v-leave-active{ transition:opacity 3s; } </style> </head> <body> <div id="root"> <transition> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切换</button> </div> <script> var vm=new Vue({ el:‘#root‘, data:{ show:true }, methods:{ handleClick:function(){ this.show=!this.show } } }) </script> </body>
原文：https://www.cnblogs.com/tengteng0520/p/12071872.html