Vue封装的过渡与动画

一、Vue动画内置组件

（1）Transition

（2）TransitionGroup

二、Vue中使用css过渡效果class

三、Vue组件实现动画

（1）单个动画，用transition

（2）多个动画用transition-group内置组件

四、引入animate.css来实现动画

(1)在vscode终端进行安装

(2)在组件Test3的script中进行引入

(3)然后在transition组件内置中进行使用

一、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>



<button @click="isShow=!isShow">显示/隐藏</button>



<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>

<button @click="isShow=!isShow">显示/隐藏</button>

<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>



<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>