过渡组件

除了类 class，内联样式 style 和状态 state 实现元素或组件的过渡和动画外，还可以使用过渡组件制作基于状态变化的过渡和动画

过渡组件 - 为单个进入和离开 DOM树的元素或组件添加动画效果

实现原理 - 将进入和离开动画应用到通过默认插槽 slot 传递给它的元素或组件 - 将动画应用到它包裹的元素

内置组件 - 无需注册即可在任意别的组件中使用

更多信息，请访问官方文档 - transition、官方文档 - API

适用场景

.由 v-if 所触发的切换

.由 v-show 所触发的切换

.由特殊元素 <component> 切换的动态组件

.改变特殊的 key 属性

.弥补了传统CSS的过渡动画 transition 不能响应 display 的显示和隐藏状态[???]

<Transition>
    <div v-if="flag">true</div>
    <div v-else>false</div>
</Transition>

属性 Props

name

css

appear

type

duration

mode

过渡阶段

区分：进入阶段 enter 还是离开阶段 leave 两个阶段；每次过渡，只能触发一个阶段的效果：要么进来 enter，要么离开 leave

每个阶段又可细分为3个子阶段；如下图

enter：从无到有，包括：开始的进入 from 和结束 to，中间则是进入的过渡过程 active

leave：从有到无，包括：离开的进入 from 和结束 to，中间则是离开的过渡过程 active

每个阶段都对应一个内置类，默认是 v 开头；类的具体实现需要自己定义

1. 进入 enter

v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除

v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型；一般都会搭配原生 CSS 过渡动画 transition 或帧动画 animation 一起使用

v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除

2. 离开 leave

v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除

v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型；一般都会搭配原生 CSS 过渡动画 transition 或帧动画 animation 一起使用

v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除

仅支持单个元素或组件作为其插槽内容。如果内容是一个组件，这个组件必须仅有一个根元素

元素的CSS效果会叠加到过渡上，如设置了背景颜色，则过渡的进入和退出都将应用该背景属性

[] 单击查看元素的淡入淡出 - 基于CSS的 transition；更多细节，请查看实操 - 模态框

注意：事件元素应放在过渡组件前面，否则。。。

<template>
    <button @click="flag = !flag">click to switch</button>
    <Transition>
        <div v-if="flag">true</div>
        <div v-else>false</div>
    </Transition>
</template>
    
<script setup>
    import { ref } from 'vue';
    let flag = ref(false)
</script>
    
<style  scoped>
    //没有指定from，则默认是元素渲染完毕的状态，opacity为1
    //实现从1到0的过渡
    //过渡效果由CSS的transition动画实现
    .v-enter-from,
    .v-leave-to {
        opacity: 0;
    }
    
    .v-enter-active,
    .v-leave-active {
        transition: opacity 3s ease;
    }
</style>

过渡事件

监听 <Transition> 组件事件的方式在过渡过程中挂上钩子函数

每个钩子函数都可以指定 el 获取事件对象，如获取对象的自定义数据 data-；后续的列表渲染中，经常会用到

enter 和 leave 需要额外指定结束函数 done

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @enter-cancelled="onEnterCancelled"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
>
</Transition>

// 在元素被插入到 DOM 之前被调用
// 用这个来设置元素的 "enter-from" 状态
function onBeforeEnter(el) {}

// 在元素被插入到 DOM 之后的下一帧被调用
// 用这个来开始进入动画
function onEnter(el, done) {
  // 调用回调函数 done 表示过渡结束
  // 如果与 CSS 结合使用，则这个回调是可选参数
  done()
}

// 当进入过渡完成时调用。
function onAfterEnter(el) {}

// 当进入过渡在完成之前被取消时调用
function onEnterCancelled(el) {}

// 在 leave 钩子之前调用
// 大多数时候，你应该只会用到 leave 钩子
function onBeforeLeave(el) {}

// 在离开过渡开始时调用
// 用这个来开始离开动画
function onLeave(el, done) {
  // 调用回调函数 done 表示过渡结束
  // 如果与 CSS 结合使用，则这个回调是可选参数
  done()
}

// 在离开过渡完成、
// 且元素已从 DOM 中移除时调用
function onAfterLeave(el) {}

// 仅在 v-show 过渡中可用
function onLeaveCancelled(el) {}

[] 单击按钮，提示文字缩小消失后，进入百度主页 - 基于CSS的animation

拓展1：请根据实例中的核心代码完成过渡类的设计

拓展2：增加其它监听事件，查看过渡效果

思考1：如果不增加按钮 button，直接把单击事件加到过渡组件或提示文本上???

思考2：如果监听CSS的 animation事件???

<button @click="toBaidu">enter</button>
<Transition name="zoom" @after-leave="onAfterLeave">
    <div class="item" v-if="isEnter">click to enter baidu</div>
</Transition>

let isEnter = ref(true)

const toBaidu = () => {
  isEnter.value = false
}
const onAfterLeave = () => {
  console.log('leave end');
  window.location.href = 'https://www.baidu.com'
}

复用过渡效果

将设计好的过渡效果应该到其它组件

一个项目中，不同元素的过渡效果应该尽量保持一致

封装 <Transition> 组件预留插槽 slot，以便运用到不同内容

出现时过渡

如果你想在某个节点初次渲染时应用一个过渡效果，你可以添加属性 appear

[] 使用 appear 属性，配合组件封装，实现：加载出现、点击消失的过渡效果

封装组件 <Fadein>

<template>
    <div>
        <Transition name="my-fadein" appear>
            <slot></slot>
        </Transition>
    </div>
</template>
    
<style>
    /* scoped 对插槽内容无效；因为插槽仅仅是一个占位符 */
    .my-fadein-enter-from,
    .my-fadein-leave-to {
        opacity: 0;
    }
    
    .my-fadein-enter-active,
    .my-fadein-leave-active {
        transition: opacity 0.4s;
    }
</style>

使用组件 <Fadein> - 单击时，isShow逻辑取反，略

<div>
    <button @click="renderDom">render</button>
    <Fadein>
        <p v-if="isShow">hi,there</p>
    </Fadein>
</div>

拓展：使用列表渲染，尝试为每一项增加封装的过渡效果；如果需要依次延时渲染，如何实现???

动态过渡

可以为每个过渡指定 name 属性加以区分；指定了 name 属性的过渡，其内置类将不再以v开始，而是以 name 名开始

<Transition name="scale" appear>
    <slot></slot>
</Transition>

可以绑定 name 属性，当状态变化时，动态地应用不同类型的过渡

<Transition :name="transition-name" appear>
    <slot></slot>
</Transition>