<Transition>动画过渡组件
可在组件或元素显示、隐藏时产生过渡效果。
触发条件：
v-if
v-show
动态组件component的切换
注意事件：
1、<Transition> 仅支持单个元素或组件作为其插槽内容。如果内容是一个组件，这个组件必须仅有一个根元素,且根元素是template时会不显示。
<!-- 编译出错，必需只能包含一个根元素 -->
<Transition>
<p>第一行</p>
<p>第二行</p>
</Transition>
<!-- template 不能做为根元素 -->
<Transition>
<template>
<h1>阶段{{stage}}</h1>
</template>
</Transition>
2、对于大多数的 CSS 动画，我们只需要简单地在 *-enter-active 和 *-leave-active class 下声明动态状态。
属性与事件
<Transition
name = "[String]"
css = "[Boolean]"
type = "[transition|animation]"
duration = "[Number | { enter: number; leave: number }]"
mode = "[in-out | out-in | default]"
appear = "[Boolean]"
enterFromClass = "[String]"
enterActiveClass = "[String]"
enterToClass = "[String]"
appearFromClass = "[String]"
appearActiveClass = "[String]"
appearToClass = "[String]"
leaveFromClass = "[String]"
leaveActiveClass = "[String]"
leaveToClass = "[String]"
@before-enter = [Event]
@before-leave = [Event]
@enter = [Event]
@leave = [Event]
@appear = [Event]
@after-enter = [Event]
@after-leave = [Event]
@after-appear = [Event]
@enter-cancelled = [Event]
@leave-cancelled = [Event] // 仅仅 v-show 有效
@appear-cancelled = [Event]
></Transition>
属性：
name = "[String]" 基于CSS方式时，需要设置此属性。通过绑定对应name的CSS样式，产生动画过渡。
css = "[Boolean]" 是否应用 CSS 过渡 class。默认值true。值false时，CSS过滤样式无效，需要采用事件定义相应的动画。
type = "[transition|animation]" 指定要等待的过渡事件类型。来确定过渡结束的时间。默认情况下会自动检测。
duration = "[Number | { enter: number; leave: number }]" 设置过渡时长，可以是数值，也可以单独指定进入时长、离开时长
mode = "[in-out | out-in | default]" 默认情况下，同一个Transition组件内的元素，是上一个过渡结束与下一个过渡开始同时进行。这样会产生过渡重叠问题。此属性可以使上一个过渡结束，才执行下一个过渡开始。
appear = "[Boolean]" 是否对初始渲染使用过渡。默认值为false，初始化时不使用过渡效果
通过属性定义过渡效果：（常用于和第三方库集合）
enterFromClass = "[String]" 进入动画的起始状态样式
enterActiveClass = "[String]" 进入动画的生效状态样式
enterToClass = "[String]" 进入动画的结束状态样式
appearFromClass = "[String]" 初始化过渡时进入动画的起始状态样式
appearActiveClass = "[String]" 初始化过渡时进入动画的生效状态样式
appearToClass = "[String]" 初始化过渡时进入动画的结束状态样式
leaveFromClass = "[String]" 离开动画的起始状态样式
leaveActiveClass = "[String]" 离开动画的生效状态样式
leaveToClass = "[String]" 离开动画的结束状态样式
过渡效果不同阶段触发的事件：（可用于纯脚本定义动画过渡样式）
@before-enter = [Event] 在元素被插入到 DOM 之前被调用，用这个来设置元素的 "enter-from" 状态
事件原型：
function onBeforeEnter(el) {}
@before-leave = [Event] 在 leave 钩子之前调用
事件原型：
function onBeforeLeave(el) {}
@enter = [Event] 在元素被插入到 DOM 之后的下一帧被调用，用这个来开始进入动画
事件原型:
function onEnter(el, done) {
// 调用回调函数 done 表示过渡结束
// 如果与 CSS 结合使用，则这个回调是可选参数
done()
}
@leave = [Event] 元素离开时被调用。仅在 v-show 过渡中可用
事件原型:
function onLeaveCancelled(el) {}
@appear = [Event] 初始化时过渡效果时调用
@after-enter = [Event] 当进入过渡完成时调用。
事件原型：
function onAfterEnter(el) {}
@after-leave = [Event] 在离开过渡完成、且元素已从 DOM 中移除时调用
事件原型:
function onAfterLeave(el) {}
@after-appear = [Event]
@enter-cancelled = [Event]
事件原型:
function onEnterCancelled(el) {}
@leave-cancelled = [Event] // 仅仅 v-show 有效
@appear-cancelled = [Event]
<Transition>组件有三种方式实现过渡效果，分别是：
一、基于CSS样式的过渡效果。
知识点：
1、给<Transition>组件增加name属性，使其与对应的css样式绑定。通过css制作过渡动画。比如下例中name值为：myStyle，其对应绑定的css样式分别为：
myStyle-enter-from 进入动画的起始状态
myStyle-enter-active 进入动画的生效状态
myStyle-enter-to 进入动画的结束状态
myStyle-leave-from 离开动画的起始状态
myStyle-leave-active 离开动画的生效状态
myStyle-leave-to 离开动画的结束状态
2、<Transition>组件支持深层次控制子元素过渡效果。比如下例中，.myStyle-enter-active .box 样式单独设置了子元素的过渡效果。
3、深层次控制子元素动画效果时，组件无法监听子元素动画执行时长，所以可能需要使用 duration 属性，设置动画时长。
4、大多数的过渡效果，只需要设置 enter-active 与 leave-active 样式就可以了。
示例：
<template>
<button @click="isShow=!isShow">{{isShow?'隐藏':'显示'}}</button>
<Transition name="myStyle" appear mode="out-in">
<div v-if="isShow" class="pt-3">
<div class="box mx-auto bg-info text-center">块一</div>
</div>
<div v-else class="pt-3">
<div class="box mx-auto bg-info text-center">块二</div>
</div>
</Transition>
</template>
<script setup>
import {
ref
} from 'vue'
const isShow = ref(true)
</script>
<style scoped>
.box {
width: 100px;
height: 100px;
line-height: 100px;
}
/* 定义过渡效果：透明度改变 */
.myStyle-enter-from {
opacity: 0;
}
.myStyle-enter-active {
opacity: 0.5;
}
.myStyle-enter-to {
opacity: 1;
transition: all ease-in-out .4s;
}
.myStyle-leave-from {}
.myStyle1-leave-active {
transition: all ease-in-out .4s;
}
.myStyle-leave-to {
opacity: 0;
transition: all ease-in-out .4s;
}
/* 深层次控制子元素动画效果，使期背景色、缩放改变 */
.myStyle-enter-active .box {
background-color: #ccc;
transform: scale(2.2, 2.2);
}
.myStyle-enter-to .box {
transform: scale(1, 1);
transition: all ease-in-out .4s;
}
.myStyle-leave-active .box {
transform: scale(1.5, 1.5);
}
.myStyle-leave-to .box {
transform: scale(2, 2);
transition: all ease-in-out .4s;
}
</style>
二、与第三方库集成的过渡效果。
三、javascript自定义过渡效果。
封状<Transition>的过渡效果：
我们可以自定义一个组件，把常用的<Transition>过渡效果进行封状，比如：
封状成组件：MyTransition
<!-- MyTransition.vue -->
<script>
// JavaScript 钩子逻辑...
</script>
<template>
<!-- 包装内置的 Transition 组件 -->
<Transition
name="my-transition"
@enter="onEnter"
@leave="onLeave">
<slot></slot> <!-- 向内传递插槽内容 -->
</Transition>
</template>
<style>
/*
必要的 CSS...
注意：避免在这里使用 <style scoped>
因为那不会应用到插槽内容上
*/
</style>
应用封装：
<MyTransition>
<div v-if="isShow">内容部份</div>
</MyTransition>
标签：动画,Vue,样式,简介,leave,myStyle,过渡,enter,组件 From： https://www.cnblogs.com/wm218/p/16711602.html