vue transition 属性 - css - 前端 - 技术设计

常用属性：
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

一、过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的，则 v- 是这些类名的默认前缀。如果你使用了，则以你设置的name值作为过渡类名前缀。例如：那么 v-enter 会替换为 my-transition-enter。

Transition Diagram

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 被删除)，在过渡/动画完成之后移除。

二、自定义过渡的类名

我们可以通过以下属性来自定义过渡类名，他们的优先级高于普通的类名，这对于 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>相同

五、实例

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