Vue中css过渡动画原理

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

Vue中css过渡动画原理_第1张图片

Vue中css过渡动画原理_第2张图片

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

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

Vue中css过渡动画原理_第3张图片

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

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

Vue中css过渡动画原理_第4张图片

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

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

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

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

Vue中css过渡动画原理_第5张图片

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

在上面的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中css过渡动画原理_第6张图片

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

Vue中css过渡动画原理_第7张图片

和上面enter的理解基本一致

Vue中css过渡动画原理_第8张图片

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

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

整体过程如下图

Vue中css过渡动画原理_第9张图片

下面摘自Vue官网:

  1. v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。

  2. v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。

  3. v-enter-to2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。

  4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。

  5. v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。

  6. v-leave-to2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。

你可能感兴趣的:(Vue)