过渡组件

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

Xmind

Introduction

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

实现原理 - 为单个进入和离开 DOM 树的元素或组件添加动画效果；将进入和离开动画应用到通过默认插槽 slot 传递给它的元素或组件；将动画应用到它包裹的元素

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

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

一般都会搭配原生 CSS 过渡动画 transition 或帧动画 animation 一起使用

Scenario

. 由 v-if 所触发的切换

. 由 v-show 所触发的切换

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

. 改变特殊的 key 属性

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

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

Phases

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

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

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

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

leave：包括：从哪里开始离开 from 和到哪里结束 to，中间则是离开的过渡过程 active

以透明度 opacity 变化为例；没有显示的指定 v-enter-to 和 v-leave-from 就使用元素的静态样式

过渡阶段

//开始：从0到1的过渡
//结束：从1到0的过渡
.v-enter-from,
.v-leave-to {
    opacity: 0;
}

.v-enter-active,
.v-leave-active {
  // 指定 opacity 参与过渡
  transition: opacity 3s ease;
  // 也可以省略具体的属性；默认所有属性都参与过渡
  // transition: 3s ease;
}

Props

. 常见属性如下；也可以自定义样式类

1. name：字符串；过渡效果名/样式类的名字；默认是 v；多个过渡需要指定 name；还可以动态绑定 name，实现更丰富的过渡效果；见后续

2. appear：布尔；初次渲染时应用一个过渡效果/立即执行过渡效果

. 更多属性请访问 Transition API - Props

Events

监听 <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) {}

Advanced

1. 动态过渡效果

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

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

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

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

2. 封装过渡效果

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

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

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

Drill

[] 详情页 DetailsView.vue → 权益保护模态框组件 Modal.vue；使用双向绑定实现

. 位置变化 - 显示时，从底部移入；消失时，移回底部

. 使用默认样式类

<Transition>
  <Modal v-if="isShow" v-model="isShow"></Modal>
</Transition>

.modal {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 9;
}

.v-enter-from,
.v-leave-to {
  bottom: -100%;
}

.v-enter-active,
.v-leave-active {
  // 指定过渡属性
  transition: bottom 0.5s ease-in-out;
  // 不指定过渡属性；默认所有属性都参与过渡
  transition: 0.5s ease-in-out;
}

Summary

<Transition>的特点

<Transition>的基本使用

<Transition>的事件

<Transition>的封装

Homework

[] 提示信息模态框

单击时，模态框元素在视图右上角淡入

[] 单击按钮，提示文字缩小消失后，进入百度主页 - 基于 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'
}

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

封装组件 <Fadein>

<div>
  <Transition name="my-fadein" appear>
    <slot></slot>
  </Transition>
</div>

.my-fadein-enter-from,
.my-fadein-leave-to {
  opacity: 0;
}

.my-fadein-enter-active,
.my-fadein-leave-active {
  transition: opacity 0.4s;
}

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

<div>
  <button @click="renderDom">render</button>

  <Fadein>
    <p v-if="isShow">hi,there</p>
  </Fadein>
</div>

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