Table of contents
1. Vue animation built-in components
Two, use css transition effect class in Vue
Three, Vue components realize animation
(1) Single animation, use transition
(2) Transition-group built-in components for multiple animations
4. Introduce animate.css to realize animation
(1) Install on the vscode terminal
(2) Introduce in the script of component Test3
(3) Then use it in the built-in transition component
1. Vue animation built-in components
（1）Transition
It can apply entering and leaving animations to elements or components passed to it via default slots;
You can pass in the name attribute to declare a transition effect name, and use v-if or v-show to switch its element animation
（2）TransitionGroup
When implementing multiple animation effects, use it to wrap, and you can set the transition name like transition, but at this time you must set the key attribute for its internal label
Two, use css transition effect class in Vue
1.v-enter-from: Enter the initial state of the animation. Added before element insertion, removed in the next frame after element insertion is complete.
2.v-enter-active: Enter the active state of the animation. Applies to the entire entry animation phase.
3.v-enter-to: Enter the end state of the animation. Added the next frame after element insertion is complete, and removed after animation completes.
4.v-leave-from: Leave the initial state of the animation. Added immediately when the exit transition is triggered, removed one frame later.
5.v-leave-active: The active state of the leave animation. Applies to the entire exit animation phase.
6.v-leave-to: Leave the end state of the animation. Added the next frame after a leave animation is fired Removed after the transition or animation completes
Three, Vue components realize animation
(1) Single animation, use transition
Use a button to control display or hide, come and go with animation, Test component
<template>
<div>
<!-- Use isShow to determine whether to hide or display -->
<button @click="isShow=!isShow">Show/Hide</button>
<!-- Whoever wants to have an animation effect, wrap whoever is in the transition tag appear means that there is animation at the beginning -->
<transition name='do' appear>
<h2 v-show="isShow" >Hello! </h2>
</transition>
</div>
</template>
<script>
// Inside is the leaked vue instance
export default {
name:'Test',
data(){
return {
isShow:true
}
}
}
</script>
<style>
h2{
background-color: chartreuse;
width: 400px;
}
/* Property settings provided by vue */
.do-enter-active{
animation: MyAnimation 1s ;
}
.do-leave-active{
animation: MyAnimation 1s reverse;
}
@keyframes MyAnimation {
from{ transform: translateX(-100%);}
to{ transform: translateX(0px);}
}
</style>
Import the Test.vue component in App.vue, and configure and use it to produce the effect
(2) Transition-group built-in components for multiple animations
When clicking to show or hide, one leaves with an animation effect, and one enters with an animation effect
<template>
<div>
<!-- Use isShow to determine whether to hide or display -->
<button @click="isShow=!isShow">Show/Hide</button>
<!-- Who wants to have an animation effect , who wraps it with the transition tag appear means that there is animation at the beginning -->
<transition-group name="do" appear>
<!-- one is displayed, the other is not displayed -->
<h2 v-show="! isShow" key="1">Hello! </h2>
<h2 v-show="isShow" key="2">Hello! </h2>
</transition-group>
</div>
</template><script>
// Inside is the exposed vue instance
export default { name:'Test2', data(){ return { isShow:true } }
}
</script><style>
h2{ background-color: chartreuse; width: 400px; } /* The attribute provided by vue sets the starting point of entry*/ .do-enter, .do-leave-to{ transform: translateX(-100%); } /* Actions activated during the entire process of coming and going*/ .do-enter-active,.do-leave-active{ /* How to transition*/ transition: 0.5s linear; } /*End point of entry*/ .do-enter -to,.do-leave{ transform: translateX(0px); } </style>
Import the Test2.vue component in App.vue, and configure and use it to produce the effect
4. Introduce animate.css to realize animation
(1) Install on the vscode terminal
npm install animate.css
(2) Introduce in the script of component Test3
import 'animate.css';
(3) Then use it in the built-in transition component
<transition
appear
name="animate_animated animate_bounce"
enter-active-class="animate_swing"
leave-active-class="animate backOutUp"
>
<h2 v-show="isShow" >Hello! </h2>
</transition>
overall code
<template>
<div>
<!-- Use isShow to determine whether to hide or display -->
<button @click="isShow=!isShow">Show/Hide</button>
<transition
appear
name="animate_animated animate_bounce"
enter-active-class="animate_swing"
leave-active-class="animate backOutUp"
>
<h2 v-show="isShow" >Hello! </h2>
</transition>
</div>
</template>
<script>
import 'animate.css';
// Inside is the leaked vue instance
export default {
name:'Test2',
data(){
return {
isShow:true
}
}
}
</script>
<style>
h2{
background-color: chartreuse;
width: 400px;
}
</style>
Import the Test3.vue component in App.vue, and configure and use it to produce the effect
It can produce a swing effect when entering, and a flying effect when leaving