1.vue的css动画的使用步骤是什么?
以元素过渡隐藏和显示为例,css使用步骤下图
这样就可显示动画了。
2.vue的css动画原理是什么?
答: 当一个元素被transition包裹
之后,vue会自动的分析元素的css样式
,然后构建一个动画的流程
。
流程分2块,一块是元素显示的流程,一块是元素隐藏的流程。
显示流程:
- 显示动画执行的瞬间,会在第一帧增加2个属性的名字: fade-enter和fade-enter-active。
- 当第一帧执行过后,vue会把之前添加的fade-enter这个class去掉,然后再增加一个fade-enter-to这样一个class的名字,接着动画继续执行。
- 执行的结束的这一瞬间,vue会吧fade-enter-active和fade-enter-to这2个class属性移除除掉。
那么我们通过自定义vue的这几个css样式,就可以实现我们想要的效果了。
代码演示如下:
这样,div在显示的时候就有过渡的效果啦。
注意:
所有的样式都以fade开头是因为:
隐藏流程
- 隐藏动画执行的瞬间,会在第一帧增加2个属性的名字: fade-leave和fade-leave-active。
- 当第一帧执行过后,vue会把之前添加的fade-leave这个class去掉,然后再增加一个fade-leave-to这样一个class的名字,接着动画继续执行。
- 执行的结束的这一瞬间,vue会吧fade-leave-active和fade-leave-to这2个class属性移除除掉。
代码示例如下:
显示流程和隐藏流程合起来写就是如下的代码:
另外,vue的css动画效果,也叫vue的过渡动画效果。