要想内容有动画效果,需要内容外面包裹transition标签,然后给这个标签起一个名字,这个名字可以任意的起。

当一个元素被transition包裹之后,vue会自动分析被包裹的元素的css样式(即vue会自动帮我们构建一个动画流程),然后构建一个都动画的流程,在动画即将被执行的一瞬间,会往内部div上增加2个class名字,分别是fade-enter和fade-enter-active,在动画第一帧执行结束后,运行到第二帧的时候,vue会去掉fade-enter,增加fade-enter-to样式,接着动画会继续的执行,执行到结束的一瞬间,vue会干一件事情,他会把会把fade-enter-active和fade-enter-to去除掉。经过如下几个过程:

 

vue中的css动画原理

从显示状态变为隐藏状态:

vue中的css动画原理

如果不想给transition起name的话,可以直接使用v-命名

vue中的css动画原理

vue中的css动画原理

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-09-18
  • 2021-10-07
  • 2021-10-03
  • 2021-11-26
  • 2021-10-25
猜你喜欢
  • 2022-12-23
  • 2021-07-08
  • 2021-07-05
  • 2021-12-06
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案