Vue-transition组件(过渡动画)
Vue-transition组件(过渡动画)文章目录Vue-transition组件(过渡动画)前言一、使用步骤1、使用\组件包裹需要切换的 组件/元素2、定义过渡类名3、添加切换事件二、CSS过渡三、使用transition组件结合CSS动画1、使用\组件包裹需要切换的 组件/元素2、定义动画3、定义过渡类名4、添加切换事件5、结合animatecss库四、transition-group组件
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>
更多推荐
所有评论(0)