在使用vue动画的时候需要循环展示某个信息,我们使用
@keyframes show-in {
0% {
opacity: 0;
transform: scale(.5) translateY(0);
}
20% {
opacity: 1;
transform: scale(1) translateY(0);
}
50% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-43px);
}
}
.show-enter-active {
animation: show-in 2s;
}
这种来定义动画,然后在动画结束的时候,
<transition name="show">
<div class="item" v-if="show"></div>
</transition>
我们设置show为false,但是这个时候我们设置的时候,动画会闪一下,这里是因为我们在删除的时候,vue动画会有删除的钩子动画的执行,
.show-leave-active {
}
所以导致会闪一下,我们需要做的是,设置一下这个动画特性
.show-leave-active {
opacity: 0;
}
这样就可以了,vue的动画是一个完整的动画流程,有问题我们需要思考他执行动画的完成流程是什么。在这里完成流程是:设置元素为true之后开始显示,动画组件监测到显示出来,会增加相应的v-enter-active类,然后等到动画执行接触,在你删除元素的时候也会同样执行这个过程,监测到你要删除就会在恰当的时机添加删除类v-leave-active 等。我们考虑到完整的流程是在v-leave-active 这里闪的,解决方案就是设置这个类。
就解决这个问题了。