1. animate.css
1. What is animate.css?
Animate.css is a ready-made, cross-platform animation library for our web projects, very useful for emphasis, home page, slide, attention guide
2. How to use animate.css?
Step 1: Install animate.css
How to: npm install animate.css
Step 2: Import the animate.css library
Method: import "animate.css"
Note: It is recommended to import in the main.js file
Part 3: Use animation animation or classes provided by animate
animate.css official website: https://animate.style/
On the right is the animation name defined by animate.css for us
(1) The first usage of animate.css:
Note: It needs to be used in conjunction with the built-in component transition
(2), the second usage of animate.css
If you want to add any animation, click the copy on the right to copy the class name of this animation
Note: custom class has higher priority
Second, the use of gsap library
In some cases, we want to achieve some animation effects through JavaScript. At this time, we can choose to use the gsap library to complete it.
1. What is gsap?
GSAP is the abbreviation of The GreenSock Animation Platform (GreenSock Animation Platform);
it can animate CSS properties, SVG, Canvas, etc. through JavaScript, and is browser compatible;
2. How to use gsap
Step 1: Install gsap
Method: npm install gsap
javascript hook
Before using the animation, let's take a look at the JavaScript hooks provided by the transition component. These hooks can help us monitor
what stage the animation is executing.
Note: This is the javascript hook provided by the transition component. The transition component will execute these hooks when it performs animation for us
Step 2: Introduce the gsap library
Method: import gsap from 'gsap'
Part 3: Use the corresponding api
When we use JavaScript to perform transition animations, we need done
callbacks, otherwise they will be called synchronously and the transition will complete immediately. So onComplete:done must be written, the main function of onComplate:done is to tell the transition component that
the current animation is finished
Note: Adding: css="false" will also make Vue skip CSS detection. In addition to slightly higher performance, this can avoid the impact of CSS rules during the transition process.
:css="false" can invalidate the animation written in the style
gsap achieves the effect of digital increment (small case)
The computed attribute in the small case above can also be omitted, and { {showNumber}} can be used to display showNumber directly.
Third, the transition of the list
Note: transition-group is also a built-in component
1. Basic use of list transition
2、v-move
As long as the content of the element wrapped by transition-group changes, the class name v-move will be added
2. Shuffle the order of the numbers above
First introduce a library lodash
Installation: npm install lodash
Import: import _ from 'lodash'
4. Staggered transition case of list
