<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> /*自定義動畫*/ /*@keyframes boom_in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } .v-enter-active { transform-origin: left center; animation: boom_in 1s; } .v-leave-active { transform-origin: left center; animation: boom_in 1s reverse; }*/ /*---自定義過渡動畫(.v-enter-active/.v-leave-active)名字----*/ /*自定義過渡動畫class的名字 transition標簽用enter-active-class指定 .custom-enter-classname { transform-origin: left center; animation: boom_in 10s; } 自定義過渡動畫class的名字 transition標簽用leave-active-class指定 .custom-leave-classname { transform-origin: left center; animation: boom_in 10s reverse; }*/ </style> </head> <body> <div id="app"> <h3>自定義過渡動畫，使用animate.css庫</h3> <!-- 自定義過渡動畫class的名字 --> <!-- <transition enter-active-class="custom-enter-classname" leave-active-class="custom-leave-classname" > --> <!-- 自定義動畫名字使用animate.css庫 先下載animated.css --> <!-- 插入和離開過渡動畫都添加animated樣式，然后根據不同需求添加不同的動畫效果 --> <transition enter-active-class="animated swing" leave-active-class="animated shake" > <h2 v-if="show">hello world</h2> </transition> <button @click="handleClick">切換</button> </div> </body> <script type="text/javascript"> let vm = new Vue({ el: '#app', data: { show: true }, methods: { handleClick () { this.show = !this.show } } }) </script> </html>