5-1Vue中的CSS动画原理 · 武功秘籍大全

~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的CSS动画原理</title> <script src="vue.js"></script> <style> /*以fade来开头,原因是transition中的name以fade开头*/ /*.fade-enter{*/ /* opacity: 0;*/ /*}*/ /*.fade-enter-active{*/ /* transition: opacity 3s;*/ /*}*/ /*如果transition中没有定义name,则vue以v开头*/ .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() { this.show = !this.show } } }) </script> </body> </html> ~~~