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>