vue动画实现方式
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>
