Vue-transition组件（过渡动画）

Vue-transition组件（过渡动画）

---

前言

transition组件用于控制组件、元素的显示消失切换效果。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用步骤

1、使用<transition>组件包裹需要切换的 组件/元素

代码如下（示例）：

<transition name="animation">
    <div v-show="isShow" class='box'>
        切换显示的元素 / 组件 
    </div>
    <button>按钮</button>
</transition>

2、定义过渡类名

【初始状态】 v-enter
【过渡状态】 v-enter-active
【结束状态】 v-leave-to
【过渡状态】 v-leave-active

代码如下（示例）：

/*初始状态*/
.animation-enter{
    opacity:0;
  	transtion:translateX(-400px) rotate(360deg);
    /* 初始状态：
    透明度为0
    div左移400px
    旋转360°
    */
}
/*显示过渡*/
.animation-enter-active{
	transtion:all 1s;
    /*1s后从初始状态，过渡到显示状态*/
}
/*
初始状态->div正常显示 耗时1s
即{opacity:0;transtion:translateX(-400px) rotate(360deg);}->{opacity:1;transtion:translateX(0) rotate(0);} 耗时1s
*/

/*结束状态*/
.animation-leave-to{
	opacity:0;
  	transtion:translateY(400px) scale(0.1);
    /* 结束状态：
    透明度为0
    div右移400px
    缩小10倍
    */
}
/*消失过渡*/
.animation-leave-active{
	transtion:all 1s;
    /*1s后从显示状态，过渡到结束状态*/
}
/*
div正常显示->结束状态 耗时1s
即{opacity:1;transtion:translateY(0) scale(1);}->{opacity:0;transtion:translateY(400px) scale(0.1);} 耗时1s
*/

【注】
1、transition只能控制单个 组件/元素 的动画（无法控制多个）
2、使用v-if、v-else-if、v-else可以控制多个平行 组件/元素 （多个元素同时只显示一个，本质上还是控制单个元素）
【如果v-if控制的是相同标签的元素，那么每个元素必须添加key，不然diff算法更新dom最优方法:更新class等属性，而不是增删元素】
3、添加mode属性: 控制v-if、v-else-if、v-else控制的多个元素动画（多个元素同时只显示一个，本质上还是控制单个元素）
        属性值:
                out-in – 新元素先进行过渡，完成之后当前元素过渡离开
                in-out – 当前元素先过渡离开，完成之后新元素过渡进入

3、添加切换事件

代码如下（示例）：

<transition name="animation">
    <div v-show="isShow" class='box'>
        切换显示的元素 / 组件 
    </div>
    <button>按钮</button>
</transition>
# 二、使用步骤
## 1.引入库


<font color=#999AAA >代码如下（示例）：



```c
<transition name="animation">
    <div v-show="isShow" class='box'>
        切换显示的元素 / 组件 
    </div>
    <button @click="isShow=!isShow">{{ isShow?"隐藏":"显示" }}</button> 
    // 点击进行显示切换
</transition>

二、CSS过渡

即给上面例子中的 .animation-enter-active、.animation-leave-active 这些类名应用的CSS样式

三、使用transition组件结合CSS动画

即使用transition组件结合animation属性

1、使用<transition>组件包裹需要切换的 组件/元素

代码如下（示例）：

<transition name="ani">
    <div v-show="isShow" class='box'>
        切换显示的元素 / 组件 
    </div>
    <button>按钮</button>
</transition>

2、定义动画

代码如下（示例）：

@keyframes 动画名 {
    /*关键帧*/
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

3、定义过渡类名

代码如下（示例）：

/*【注】transition组件结合animation属性只需要定义v-enter-active和v-leave-active即可*/
.ani-enter-active {
    animation: 动画名 周期时间 延迟时间 动画运动的类型 运动次数 顺序;
}

.ani-leave-active {
    animation: 动画名 .5s;
}

4、添加切换事件

代码如下（示例）：

<transition name="animation">
    <div v-show="isShow" class='box'>
        切换显示的元素 / 组件 
    </div>
    <button @click="isShow=!isShow">{{ isShow?"隐藏":"显示" }}</button> 
    // 点击进行显示切换
</transition>

5、结合animatecss库

• 引入 animate.css
• 使用animatecss库中的运动状态
  代码如下（示例）：

.ani-enter-active{
    animation:1s 运动状态(即库里的类名，不用加".");
}
.ani-leave-active{
    animation:1s 运动状态;
}

四、transition-group组件 做列表动画

用于控制多个元素的动画
直接使用<transition-group>标签控制多个 元素/组件
代码如下（示例）：

<transition-group>
    <div v-show="isShow"></div>
    <p v-show="isShow"></p>
</transition-group>