过渡
例子
<template>
<div>
动画组件
<button @click="isshow = !isshow">显示隐藏</button>
<transition name="fade">//用transition标签包起来,加上name用来指定过渡
<p v-show="isshow">动画</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
isshow: true,
};
},
};
</script>
<style lang="less" scoped>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
过渡的类名有六个
v-enter:过渡的开始状态(从无)
v-enter-active:定义进入过渡生效时的状态,这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
v-enter-to:过渡的结束状态。(到有)
v-leave:离开过渡的开始状态。(从有)
v-leave-active:定义离开过渡生效时的状态,这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
v-leave-to:离开过渡的结束状态。(到无)
可以结合在一起
.fade-enter, .fade-leave-to {
opacity: 0;
}
.v-leave, .v-enter-to {
opacity: 1;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
动画
和过渡一个道理
.fade-enter-active {
animation: fade-in .5s;
}
.fade-leave-active {
animation: fade-in .5s reverse;
}
@keyframes fade-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
或者使用动画库
https://www.swiper.com.cn/usage/animate/index.html
//引入的swiper动画库
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<template>
<div>
动画组件
<button @click="isshow = !isshow">显示隐藏</button>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"//第二个参数是需要的动画效果
leave-active-class="animated bounceOutRight"//第二个参数是需要的动画效果
>
<p v-show="isshow">动画</p>
</transition>
</div>
</template>