前言
Vue 提供了 transition 的封装组件，任何元素和组件在下列四种情形中，都可以添加进入或离开过渡动画
- 条件渲染 (使用 v-if)
- 条件展示 (使用 v-show)
- 动态组件
- 组件根节点
一、transition用法
<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。
当插入或删除包含在 <transition> 组件中的元素时，Vue 将会做以下处理：
- 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
- 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
- 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)
<!-- 简单元素 -->
<transition>
<div v-if="ok">toggled content</div>
</transition><!-- 动态组件 -->
<transition name="fade" mode="out-in" appear>
<component :is="view"></component>
</transition><!-- 事件钩子 -->
<div id="transition-demo">
<transition @after-enter="transitionComplete">
<div v-show="ok">toggled content</div>
</transition>
</div>
// 方法
methods: {
transitionComplete(el) {
// 传入'el'这个DOM元素作为参数。
}
}二、transition的属性
常用属性：
- name: string，用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为 .fade-enter，.fade-enter-active 等。默认类名为 "v"
- appear: boolean，是否在初始渲染时使用过渡。默认为 false。
- css: boolean，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。
- type: string，指定过渡事件类型，侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
- mode: string，控制离开/进入过渡的时间序列。有效的模式有 "out-in" 和 "in-out"；默认同时进行。
- duration: number | { enter: number, leave: number } 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。
自定义过渡类名属性：
- enter-class: string
- leave-class: string
- appear-class: string
- enter-to-class: string
- leave-to-class: string
- appear-to-class: string
- enter-active-class: string
- leave-active-class: string
- appear-active-class: string
【1】过渡的类名
在进入/离开的过渡中，会有 6 个 class 切换
对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，则以你设置的name值作为过渡类名前缀。例如：那么 v-enter 会替换为 my-transition-enter。
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
【2】自定义过渡的类名
我们可以通过以下属性来自定义过渡类名，他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css结合使用十分有用。
enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)<!-- animate库 -->
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<!-- 过渡类名name -->
<!-- 自定义过渡类名enter-active-class、leave-active-class -->
<div id="example-3">
<button @click="show = !show">
Toggle render
</button>
<transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
<p v-if="show">hello</p>
</transition>
</div>
// js
data() {
return {
show: true
}
}三、transition的事件
<transition name="fade"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
>
<p v-show="show"></p>
</transition>methods:{
beforeEnter(el){
console.log('动画enter之前');
},
enter(el){
console.log('动画enter进入');
},
afterEnter(el){
console.log('动画进入之后');
},
beforeLeave(el){
console.log('动画leave之前');
},
leave(el){
console.log('动画leave');
},
afterLeave(el){
console.log('动画leave之后');
}
}四、transition-group
<transition> 是一个抽象组件，且只对单个元素生效。而 <transition-group> 组件实现了列表的过渡，并且它会渲染一个真实的DOM元素节点，默认渲染 <span>，可以通过 tag 属性配置哪个元素应该被渲染。 注意，每个 <transition-group> 的子节点必须有独立的 key，动画才能正常工作
【1】用法
<transition-group tag="ul" name="slide">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</transition-group>【2】transition-group属性
tag: string，默认为 span
move-class: 覆盖移动过渡期间应用的 CSS 类。
除了 mode，其他 attribute 和 <transition> 相同
【3】transition-group事件
事件和 <transition> 相同
五、实例
【1】transiton展开收起侧边栏
<template>
<button @click="show = !show">{{txt}}</button>
<transition name="fade">
<div class="leftNav" v-show="show">左侧边栏</div>
</transition>
</template>
<script>
export default {
data() {
return {
show: true,
}
},
computed: {
txt() {
return this.show ? '收起' : '展开'
}
},
}
</script>
<style>
.leftNav {
height: 90vh;
width: 200px;
background-color: #ccc;
}
/*设置动画*/
.fade-enter,
.fade-leave-to {
transform: translateX(-100%);
}
.fade-enter-active,
.fade-leave-active {
transition: 1s;
}
.fade-enter-to {
transform: translateX(0)
}
</style>
【2】transiton-map实现多元素收缩展开
<template>
<button @click="show = !show">{{txt}}</button>
<transition-group name="move">
<div class="box" v-show="show" key="1">1</div>
<div class="box" v-show="show" key="2">2</div>
<div class="box" v-show="show" key="3">3</div>
<div class="box" v-show="show" key="4">4</div>
</transition-group>
</template>
<script>
export default {
data() {
return {
show: true,
}
},
computed: {
txt() {
return this.show ? '收起' : '展开'
}
},
}
</script>
<style>
.move-enter,
.move-leave-to {
transform: translateX(-100%);
}
.move-enter-active,
.move-leave-active {
transition: 1s;
}
.move-enter-to {
transform: translateX(0)
}
.box {
width: 200px;
height: 100px;
background: #ccc;
margin-bottom: 2px;
}
</style>
【3】transiton配合animation动画使用
<template>
<div>
<button @click="play('topToTop')">从顶部滑入、顶部滑出</button>
<button @click="play('topToBottom')">从顶部滑入、底部滑出</button>
<button @click="play('bottomToTop')">从底部滑入、顶部滑出</button>
<button @click="play('bottomToBottom')">从底部滑入、底部滑出</button>
<button @click="play('leftToRight')">从左侧滑入、右侧滑出</button>
<button @click="play('leftToLeft')">从左侧滑入、左侧滑出</button>
<button @click="play('rightToLeft')">从右侧滑入、左侧滑出</button>
<button @click="play('rightToRight')">从右侧滑入、左侧滑出</button>
<div class="view">
<transition :name="transName">
<div v-show="show" class="block">Element</div>
</transition>
</div>
</div>
</template>
<script>
export default {
data() {
return {
transName: '',
show: true,
}
},
methods: {
play(name) {
this.transName = name;
this.show = !this.show;
}
}
}
</script>
<style>
.view {
position: relative;
height: 300px;
width: 300px;
background: gainsboro;
overflow: hidden;
}
.block {
position: absolute;
height: 100%;
width: 100%;
text-align: center;
color: white;
line-height: 300px;
background: red;
}
/*滑入——从顶部*/
@keyframes slideIn_top {
0% {
top: -100%;
}
100% {
top: 0;
}
}
/*滑入——从底部*/
@keyframes slideIn_bottom {
0% {
top: 100%;
}
100% {
top: 0;
}
}
/*滑入——从左侧*/
@keyframes slideIn_left {
0% {
left: -100%;
}
100% {
left: 0;
}
}
/*滑入——从右侧*/
@keyframes slideIn_right {
0% {
left: 100%;
}
100% {
left: 0;
}
}
/*滑出——从顶部*/
@keyframes slideOut_top {
0% {
top: 0;
}
100% {
top: -100%
}
}
/*滑出——从底部*/
@keyframes slideOut_bottom {
0% {
top: 0;
}
100% {
top: 100%
}
}
/*滑出——从左侧*/
@keyframes slideOut_left {
0% {
left: 0;
}
100% {
left: -100%
}
}
/*滑出——从右侧*/
@keyframes slideOut_right {
0% {
left: 0;
}
100% {
left: 100%
}
}
/*(滑入)——从顶部滑入,从顶部滑出*/
.topToTop-enter-active {
animation: slideIn_top 1s;
}
/*(滑出)——从顶部滑入,从顶部滑出*/
.topToTop-leave-active {
animation: slideOut_top 1s;
}
/*(滑入)——从顶部滑入,从底部滑出*/
.topToBottom-enter-active {
animation: slideIn_top 1s;
}
/*(滑出)——从顶部滑入,从底部滑出*/
.topToBottom-leave-active {
animation: slideOut_bottom 1s;
}
/*(滑入)——从底部滑入,从顶部滑出*/
.bottomToTop-enter-active {
animation: slideIn_bottom 1s;
}
/*(滑出)——从底部滑入,从顶部滑出*/
.bottomToTop-leave-active {
animation: slideOut_top 1s;
}
/*(滑入)——从底部滑入,从底部滑出*/
.bottomToBottom-enter-active {
animation: slideIn_bottom 1s;
}
/*(滑出)——从底部滑入,从底部滑出*/
.bottomToBottom-leave-active {
animation: slideOut_bottom 1s;
}
/*(滑入)——从左侧滑入,从右侧滑出*/
.leftToRight-enter-active {
animation: slideIn_left 1s;
}
/*(滑出)——从左侧滑入,从右侧滑出*/
.leftToRight-leave-active {
animation: slideOut_right 1s;
}
/*(滑入)——从左侧滑入,从左侧滑出*/
.leftToLeft-enter-active {
animation: slideIn_left 1s;
}
/*(滑出)——从左侧滑入,从左侧滑出*/
.leftToLeft-leave-active {
animation: slideOut_left 1s;
}
/*(滑入)——从右侧滑入,从左侧滑出*/
.rightToLeft-enter-active {
animation: slideIn_right 1s;
}
/*(滑出)——从右侧滑入,从左侧滑出*/
.rightToLeft-leave-active {
animation: slideOut_left 1s;
}
/*(滑入)——从右侧滑入,从右侧滑出*/
.rightToRight-enter-active {
animation: slideIn_right 1s;
}
/*(滑出)——从右侧滑入,从右侧滑出*/
.rightToRight-leave-active {
animation: slideOut_right 1s;
}
</style>
文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料
扫一扫
2055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
