Vue3衔接过渡动画
想要通过v-if或者v-show来实现动画的衔接动作,也看了网上的一些例子,这里给总结一下
这里看下效果:
这种过渡效果很简单,只需要用if语句来判断动画出现顺序即可
<transition name="h1">
<div v-if="status.block" class="box" @click="box1">
<h1>nanchen</h1>
</div>
</transition>
<div style="width:100%;height:100vh;background-color:white">
<transition name="h1">
<div v-if="status.block == false" @click="box2">
当前时间
</div>
</transition>
</div>
css样式
/* 1.过渡动画 */
@keyframes axisX {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0px);
}
}
/* 2. 过渡类名 */
/* 开始 */
.h1-enter-active {
animation: axisX 1s;
}
/* 结束 */
.h1-leave-active {
animation: axisX 1s reverse;
}
这里如果是想点击一次过渡过去再次点击一次过渡回来的话,是不需要给两个不同的transition标签设置两种动画,只需要用同一个动画即可。当然你也可以使用v-enter-active和v-leave-active来写动画,这样的话transition就不需要加**name=‘h1’**了