vue动画显示

最新推荐文章于 2024-05-21 09:23:53 发布

vieber

最新推荐文章于 2024-05-21 09:23:53 发布

阅读量601

点赞数

分类专栏：前端 vue

本文链接：https://blog.csdn.net/sufubo/article/details/103822598

版权

前端同时被 2 个专栏收录

91 篇文章 0 订阅

订阅专栏

vue

34 篇文章 0 订阅

订阅专栏

在使用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 这里闪的，解决方案就是设置这个类。

就解决这个问题了。