VUE中自定义动画 动画的使用
1.首先在style中定义好动画和名字
@keyframes bounce {
0%{
transform: scale(0);
}
25%{
transform: scale(0.2);
}
50%{
transform: scale(0.4);
}
75%{
transform: scale(0.8);
}
100%{
transform: scale(1);
}
- 在style中定义动画的完成和消失时间
.bounce-enter-active{
animation: bounce 1s;
}
.bounce-leave-active{
animation: bounce 1s reverse;
}
3.把对应的标签放在中,在对应的标签中绑定消失和出现的指令
<template>
<div>
<button @click="Btn = !Btn">点击过渡</button>
<p></p>
<transition name="bounce">
<img v-if="Btn" :src="pic" alt="">
</transition>
</div>
</template>
<script>
import pic from "../assets/logo.png";
export default {
name: "TransitionAndAnimateTwo",
data(){
return{
Btn:false,
pic:pic
}
}
}
</script>
<style scoped>
.bounce-enter-active{
animation: bounce 1s;
}
.bounce-leave-active{
animation: bounce 1s reverse;
}
@keyframes bounce {
0%{
transform: scale(0);
}
25%{
transform: scale(0.2);
}
50%{
transform: scale(0.4);
}
75%{
transform: scale(0.8);
}
100%{
transform: scale(1);
}
}
</style>