Use animate transition animation in Vue project to add some simple and fancy page switching effects
The first step is to introduce css styles
Introduce the link to index.html in the public folder in the vue project, just copy it:
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
As shown below:
Here I put in line 10
The second step is to use the transition tag in the component to wrap routerview
To achieve the animation effect, it must be implemented on the routerview, just copy it
<transition
enter-active-class="animated bounce"
leave-active-class="animated bounce"
>
<router-view></router-view>
</transition>
As shown below:
Two properties are needed here,
enter-active-class 进入时的动画类名；leave-active-class 离开时的动画类名
We can find the custom excessive class name on the vue official website, just copy it:
https://cn.vuejs.org/v2/guide/transitions.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D
The third step is to set the class name of the animate animation style
Go to animate's official website to find your favorite animation style and copy the class name:
https://animate.style/
As shown below:
Click the icon to copy the class name:
After copying it, we can use it in the tag we wrote before, and add it to the class name animated,
Add the name of the animation class to be added after a blank space
**
Note: The class names copied here are all in this format: animate__bounceyou need to animate__remove
**
that's all
Done, I wish you success.