目录
一、Vue动画内置组件
（1）Transition
它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上；
可以传入name属性来声明一个过渡效果名，用v-if或v-show对其元素动画进行切换
（2）TransitionGroup
当实现多个动画效果时，用其进行包裹，和transition一样可以设置过渡名，但此时必须给其内部标签设置key属性
二、Vue中使用css过渡效果class
1.v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。
2.v-enter-active:进入动画的生效状态。应用于整个进入动画阶段。
3.v-enter-to:进入动画的结束状态。在元素插入完成后的下一帧被添加,在动画完成之后移除。
4.v-leave-from:离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。
5.v-leave-active:离开动画的生效状态。应用于整个离开动画阶段。
6.v-leave-to:离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 在过渡或动画完成之后移除
三、Vue组件实现动画
（1）单个动画，用transition
用一个按钮控制显示还是隐藏，来去带有动画效果，Test组件
<template>
<div>
<!-- 用isShow判断是隐藏还是显示 -->
<button @click="isShow=!isShow">显示/隐藏</button>
<!-- 想要谁有动画的效果，将谁用transition标签包裹起来 appear代表刚开始就有动画-->
<transition name='do' appear>
<h2 v-show="isShow" >你好呀！</h2>
</transition>
</div>
</template>
<script>
// 里面为暴漏的vue实例
export default {
name:'Test',
data(){
return {
isShow:true
}
}
}
</script>
<style>
h2{
background-color: chartreuse;
width: 400px;
}
/* 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>
在App.vue中导入Test.vue组件，并配置使用，产生的效果
（2）多个动画用transition-group内置组件
当点击显示或隐藏时，一个以动画效果离开，一个以动画效果进入
<template>
<div>
<!-- 用isShow判断是隐藏还是显示 -->
<button @click="isShow=!isShow">显示/隐藏</button>
<!-- 想要谁有动画的效果，将谁用transition标签包裹起来 appear代表刚开始就有动画-->
<transition-group name="do" appear>
<!-- 一个显示，一个不显示 -->
<h2 v-show="!isShow" key="1">你好呀！</h2>
<h2 v-show="isShow" key="2">你好呀！</h2>
</transition-group>
</div>
</template><script>
// 里面为暴漏的vue实例
export default {
name:'Test2',
data(){
return {
isShow:true
}
}}
</script><style>
h2{
background-color: chartreuse;
width: 400px;
}
/* vue提供的属性设置 进入的起点 */
.do-enter, .do-leave-to{
transform: translateX(-100%);
}
/* 来去的整个过程激活的动作 */
.do-enter-active,.do-leave-active{
/* 怎样过渡 */
transition: 0.5s linear;
}
/* 进入的终点 */
.do-enter-to,.do-leave{
transform: translateX(0px);
}
</style>
在App.vue中导入Test2.vue组件，并配置使用，产生的效果
四、引入animate.css来实现动画
(1)在vscode终端进行安装
npm install animate.css
(2)在组件Test3的script中进行引入
import 'animate.css';
(3)然后在transition组件内置中进行使用
<transition
appear
name="animate_animated animate_bounce"
enter-active-class="animate_swing"
leave-active-class="animate backOutUp"
>
<h2 v-show="isShow" >你好呀！</h2>
</transition>
整体代码
<template>
<div>
<!-- 用isShow判断是隐藏还是显示 -->
<button @click="isShow=!isShow">显示/隐藏</button>
<transition
appear
name="animate_animated animate_bounce"
enter-active-class="animate_swing"
leave-active-class="animate backOutUp"
>
<h2 v-show="isShow" >你好呀！</h2>
</transition>
</div>
</template>
<script>
import 'animate.css';
// 里面为暴漏的vue实例
export default {
name:'Test2',
data(){
return {
isShow:true
}
}
}
</script>
<style>
h2{
background-color: chartreuse;
width: 400px;
}
</style>
在App.vue中导入Test3.vue组件，并配置使用，产生的效果
可以产生进入有摇摆效果，离开有飞动效果