Vue3——使用v-if或v-show来实现过渡的动画效果
想要通过v-if或者v-show来实现动画的衔接动作,也看了网上的一些例子,这里给总结一下。这里如果是想点击一次过渡过去再次点击一次过渡回来的话,是不需要给两个不同的。这种过渡效果很简单,只需要用if语句来判断动画出现顺序即可。标签设置两种动画,只需要用同一个动画即可。就不需要加**name=‘h1’**了。
·
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’**了
更多推荐
已为社区贡献20条内容
所有评论(0)