Article Directory
1.What are the steps to use vue's css animation?
Take element transition hiding and display as an example, the steps of using css are as follows
This will display the animation.
2.What is the principle of vue's css animation?
Answer: After an element 被transition包裹, Vue will 自动的分析元素的css样式, then 构建一个动画的流程.
The process is divided into two parts, one is the process of element display, and the other is the process of element hiding.
Display process:
- Display the moment when the animation is executed, and the names of two attributes will be added in the first frame: fade-enter and fade-enter-active.
- When the first frame is executed, Vue will remove the previously added fade-enter class, and then add a fade-enter-to class name, and then the animation will continue to execute.
- At the moment of the end of execution, vue will remove the two class attributes of fade-enter-active and fade-enter-to.
Then we can achieve the effect we want by customizing these css styles of vue.
The code demonstration is as follows:
In this way, the div has a transitional effect when it is displayed.
Note:
All styles start with fade because:
Hidden process
- When the hidden animation is executed, the names of two properties will be added to the first frame: fade-leave and fade-leave-active.
- When the first frame is executed, vue will remove the previously added fade-leave class, and then add a class name like fade-leave-to, and then the animation will continue to execute.
- At the moment when the execution ends, vue will remove the two class attributes of fade-leave-active and fade-leave-to.
The code example is as follows: the
display process and the hidden process are combined to write the following code:
In addition, the css animation effect of vue is also called the transition animation effect of vue.
I opened a WeChat public
account : Search: Blooming every day.
Follow-up may push related articles from time to time. I look forward to growing with you! !
Finish