Vue-transition组件（过渡动画）

文章目录

Vue-transition组件（过渡动画）前言一、使用步骤1、使用\组件包裹需要切换的 组件/元素2、定义过渡类名3、添加切换事件 二、CSS过渡三、使用transition组件结合CSS动画1、使用\组件包裹需要切换的 组件/元素2、定义动画3、定义过渡类名4、添加切换事件5、结合animatecss库 四、transition-group组件 做列表动画

---

前言

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>