Vue 系统组件 <Transition> 简介

<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 样式就可以了。

5、可以通过动态绑定 name 实现不同的过渡效果。

示例：

 

<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>

 

 

 

二、与第三方库集成的过渡效果。

通过设置以下属性，可以实现与第三方集成，产生过渡效果。

enterFromClass = "[String]" 进入动画的起始状态样式
enterActiveClass = "[String]" 进入动画的生效状态样式
enterToClass = "[String]" 进入动画的结束状态样式
appearFromClass = "[String]" 初始化过渡时进入动画的起始状态样式
appearActiveClass = "[String]" 初始化过渡时进入动画的生效状态样式
appearToClass = "[String]" 初始化过渡时进入动画的结束状态样式
leaveFromClass = "[String]" 离开动画的起始状态样式
leaveActiveClass = "[String]" 离开动画的生效状态样式
leaveToClass = "[String]" 离开动画的结束状态样式

以集成Animate.css（官网：https://animate.style/）为例：

第一步：安装Animate.css。

$ npm install animate.css --save

第二步：代码示例

<template>
    <button @click="isShow=!isShow">{{isShow?'隐藏':'显示'}}</button>
    <!-- 过渡样式见官网样式说明 -->
    <Transition enter-active-class="animate__animated animate__flipOutY"
        leave-active-class="animate__animated animate__bounceOutRight">
        <div v-if="isShow" class="pt-3">
            <div style="width: 100px;height:100px;" class="mx-auto bg-info"></div>
        </div>
    </Transition>
</template>

<script setup>
// 在script内导入css，而不是在css里导入
    import 'animate.css'
    import {
        ref
    } from 'vue'

    const isShow = ref(false)
</script>

 

三、javascript自定义过渡效果。

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>