vue動畫實現方式
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="animate.css"> <style> * { margin: 0; padding: 0; } #app{ width: 600px; margin: 100px auto; } .box { width: 200px; height: 200px; background-color: pink; display: flex; justify-content: center; align-items: center; } button { width: 50px; height: 30px; } /* 第二步 定義入場動畫 和 出場動畫 */ /* 格式： 動畫名-enter 入場動畫*/ /* 格式： 動畫名-leave 出場動畫*/ /* 進入過渡開始時的狀態和離開過渡結束時的狀態 */ .fade-enter,.fade-leave-to{ opacity: 0; transform:translate(500px, 0); } /* 進入過渡中的效果和離開過渡中的效果 */ .fade-enter-active,.fade-leave-active{ transition: all 0.8s; } /* 進入過渡結束時的狀態和離開過渡結束時的狀態 */ .fade-enter-to,.fade-leave{ opacity: 1; } .bounce-enter-active{ animation: bounce-in .5s; } .bounce-leave-active { animation: bounce-in .5s reverse; } @keyframes bounce-in{ 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } .pp{ background-color: #c05; } </style> </head> <body> <div id="app"> <!-- 1.過渡 --> <button @click="isShow = !isShow">過渡</button> <!-- 第一步給要動畫的元素 起個動畫名子 --> <!-- 格式: name=動畫名 --> <transition name="fade" :duration="3000"> <p class="box" v-show="isShow">我要過渡</p> </transition> <hr> <!-- 2.動畫 --> <button @click="isShow2 = !isShow2">動畫</button> <!-- 第一步給要動畫的元素 起個動畫名子 --> <!-- 格式: name=動畫名 --> <transition name="bounce" :duration="{ enter: 1000, leave: 1800 }"> <p class="box" v-if="isShow2">我要運動</p> </transition> <!-- 3.自定義過渡 類名 --> <button @click="show = !show">自定義</button> <transition enter-active-class="animated tada" leave-active-class="animated bounceOutRight" > <p v-if="show" class="pp">hello</p> </transition> </div> <script src="velocity.js"></script> <script src="vue.js"></script> <script> var vm = new Vue({ data: { isShow: true, //過渡 isShow2:true, //動畫 show:true, }, methods: { } }).$mount('#app'); </script> </body> </html>