5-3Vue中同时使用过渡和动画 · 武功秘籍大全

~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中同时使用过渡和动画</title> <script src="vue.js"></script> <link rel="stylesheet" href="animate.css"> <style> .fade-enter, .fade-leave-to { opacity: 0; } .fade-enter-active, .fade-leave-active { transition: opacity 3s; } </style> </head> <body> <div id="root">       <transition name="fade" duration="{enter:5000,leave:10000}" appear appear-active-class="animated swing fade-center-active" enter-active-class="animated swing fade-leave-active" leave-active-class="animated shake" > <div v-show="show">Hello World</div> </transition> <button @click="handleClick">toggle</button> </div> <script> var vm = new Vue({ el: '#root', data: { show: true }, methods: { handleClick() { this.show = !this.show } } }) </script> </body> </html> ~~~