Vue中css过渡动画原理

先来看一下简单的切换显示按钮

我现在希望在Hello world能有一个渐隐渐现的效果

那么就需要在div外层包裹一个transition标签

当然只是这样是无法形成过渡效果的

当你在外层加了transition标签之后，Vue会自动的构建一个动画的流程，

当动画执行的一瞬间，他会往内部的div上增加两个class名字，分别是fade-enter和fade-enter-active，之所以是fade-什么什么，是因为transiton标签name是fade，

当动画运行到第二帧的时候，Vue又会帮助你把fade-enter删除，然后添加一个fade-enter-to

再当动画执行到结束的一瞬间，又把fade-enter-active和fade-enter-to删除掉

至于为什么要这样，来解释一下

这样子就会明显的过渡效果了

在上面的Vue动画过渡图中，我们发现fade-enter-active是全程存在的，他的意思是，如果我监听到了元素opacity发生了变化，那么我就让这个变化在3s内完成，

fade-enter在第一帧的时候存在，在第二帧的时候被删除，

首先在第一帧的时候，fade-enter-active和fade-enter同时存在，并且opacity=0，在第二帧的时候，fade-enter被删除，opacity恢复到原来的初始状态，就是1，在这个过程中，opacity发生了变化，所以fade-enter-active就让这个变化在3秒内完成

如果不写transiton的name，默认是v

再来看Vue元素从显示到隐藏的动画效果

和上面enter的理解基本一致

只不过这次要在v-leave-to上设置opacity：0

除了v-if可以套用transiton标签外，v-show和动态组件也可以，都会有过渡效果

整体过程如下图

下面摘自Vue官网：

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/VVVZCS/article/details/82379884
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-06-26 16:24:29
阅读 ( 444 )
分类：前端

Vue中css过渡动画原理

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看