5-2在Vue中使用 animate.css 庫 · 武功秘籍大全

~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在Vue中使用 animate.css 庫</title> <script src="vue.js"></script> <link rel="stylesheet" href="animate.css"> <style> /*@keyframes bounce-in {*/ /* 0% {*/ /* transform: scale(0);*/ /* }*/ /* 50% {*/ /* transform: scale(1.5);*/ /* }*/ /* 100% {*/ /* transform: scale(1);*/ /* }*/ /*}*/ /*.fade-enter-active {*/ /*.active {*/ /* transform-origin: left center;*/ /* animation: bounce-in 1s;*/ /*}*/ /*.leave {*/ /* transform-origin: left center;*/ /* animation: bounce-in 1s reverse;*/ /*}*/ </style> </head> <body> <div id="root">     <transition enter-active-class="animated swing" 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> ~~~