<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue中使用animate.css庫</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <link rel="stylesheet" type="text/css" href="css/animate.css" /> <style type="text/css"> @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } .fade-enter-active { transform-origin: left center; animation: bounce-in 1s; } .fade-leave-active { transform-origin: left center; animation: bounce-in 1s reverse; } .active { transform-origin: left center; animation: bounce-in 1s; } .leave { transform-origin: left center; animation: bounce-in 1s reverse; } .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"> <div v-show="show">Harold</div> </transition> <!--自定義Class--> <transition name="fade" enter-active-class="active" leave-active-class="leave"> <div v-if="show">Harold</div> </transition> <button @click="handleBtnClick">change</button> <transition name="fade" enter-active-class="animated swing" leave-active-class="animated shake"> <div v-if="show">animate.css</div> </transition> <!--第一次顯示的時候也有動畫效果——初始動畫--> <transition name="fade" appear enter-active-class="animated swing" leave-active-class="animated shake" appear-active-class="animated swing"> <div v-if="show">animate.css</div> </transition> <!--Vue中同時使用過渡和動畫--> <transition name="fade" appear enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active" appear-active-class="animated swing"> <div v-if="show">animate.css</div> </transition> <!--Vue中同時使用過渡和動畫,時長定義以transition3s的爲準（animate的默認1s）--> <transition name="fade" type="transition" appear enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active" appear-active-class="animated swing"> <div v-if="show">animate.css</div> </transition> <!--Vue中同時使用過渡和動畫,時長自定義--> <transition name="fade" :duration="5000" appear enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active" appear-active-class="animated swing"> <div v-if="show">animate.css</div> </transition> <transition name="fade" :duration="{enter: 5000, leave: 10000}" appear enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active" appear-active-class="animated swing"> <div v-if="show">animate.css</div> </transition> </div> <script type="text/javascript"> var vm = new Vue({ el: '#root', data: { show: true }, methods: { handleBtnClick() { this.show = !this.show } } }) </script> </body> </html>