vue2之过渡（transition）

transition是vue内置的组件，使用该内置组件，不会像以前使用js那样进行style属性进行动态添加和删除对应的css样式，更加方便的实现了过渡效果。

下面直接上代码：

 <hr>
          展示一下过度
          <div>
            <a-button type="primary" @click="isShow=!isShow">显示/隐藏</a-button>
            <transition name="mez" appear @afterEnter="handleEnter"
            @after-leave="handleLeave">
            
                <h1 v-show="isShow" >测试文本</h1>
            </transition>
          </div>

然后来慢慢介绍对应的API，

①name --string,它用户自动生成css过渡类名。

说到过渡，那一般都离不开样式，所以该属性的作用就是可以自定义类名前缀。

我所配置的css样式代码如下：

<style lang="less" scoped>
// @import '~@assets/less/common.less';

h1{
    background-color: rgb(98, 57, 133);
}
.mez-enter-active{
    animation: identifier 1s linear;
}
.mez-leave-active{
    animation: identifier 1s linear reverse;
}

@keyframes identifier {
    from{
        transform: translateX(-100%);
    }
    to{
        transform: translateX(0px);
    }
}
</style>

上面所设置的属性值，就是下面enter-active和leave-active类名的前缀，如果在使用transition标签时没有设置名称，那么就会使用默认的类名前缀v，完整类名就是v-enter-active,v-leave-active。可能有人说为什么要这样设置，那是因为底层vue就已经写好了，就是需要这样进行命名，一个是进入-激活的样式，另一个是离开-激活的样式，这里的命名是固定的，前面的前缀可以通过name属性的形式进行修改。

当然了，对应的类名不止这两个，暂时列举出来vue官网中对应的所有类名

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

其实这些类名并不是所有的都常用，其过程类似与vue的生命周期，在固定的节点去做什么样的事情，这里就是在固定的节点，去做对应样式的设置。

②appear

appear - boolean，是否在初始渲染时使用过渡。默认为 false。通俗理解就是你设置了这个就是一开始就加载动画，如果不设置或设置为false，一开始页面加载就不会有动画。

其他的一些属性，像type，就是指定过度事件类型。 Vue 中用于指定等待的过渡事件类型，以确定过渡结束的时间。这通常用于自动检测过渡何时结束，从而可以执行后续操作，如移除元素或触发其他事件。不过，在 Vue 的 <transition>组件中，并不直接设置type  属性来指定过渡类型，而是通过绑定对应的 CSS 类名或使用 JavaScript 钩子函数来定义过渡效果。还有一个mode，就是控制离开/进入过渡的时间序列。有效的模式有 "out-in" 和 "in-out"；默认同时进行。这一般都是在css中进行控制的，实际中几乎不会用这些属性进行控制。所以就不再用代码展示。

与之相比常用一些的就是transition中的事件了

首先列举出所有的事件

before-enter
before-leave
before-appear
enter
leave
appear
after-enter
after-leave
after-appear
enter-cancelled
leave-cancelled (v-show only)
appear-cancelled

这个也是类似声明周期，在合适的节点，触发对应的事件，在代码中，我使用了

@afterEnter="handleEnter" @after-leave="handleLeave"这两个事件，对应的函数定义如下：
 

 methods: {
        handleEnter(){
            console.log('after-enter');
        },
        handleLeave(){
            console.log('after-leave');
        }

    },

那我们就来看他的调用时机。

 

由于设置了appear属性，就一开始就执行一下动画，对应的事件也执行了after-enter就是进入之后调用的事件，然后我们通过按钮来改变一下过度效果。

 

 这个时机就是离开之后进行调用的事件。

其实就是围绕着三个主要的阶段进行的扩展，就是appear，enter，leave，我们来弄清他们三个的顺序，剩下的before和after的对应执行时机也就一目了然了。

 

那可以总结一下它们的顺序了：

如果是设置了appear，不会调用enter相关的事件，会执行以下事件

before-appear-->appear-->after-appear-->初次的事件顺序

然后设置手动的进行显示和隐藏的过渡，会执行以下事件

before-leave-->leave-->after-leave-->隐藏的事件顺序
before-enter-->enter-->after-enter-->显示的事件顺序

最后附上完整代码：

<!--
 * @Author: RealRoad
 * @Date: 2024-11-12 09:25:23
 * @LastEditors: Do not edit
 * @LastEditTime: 2024-11-12 15:47:40
 * @Description: 
 * @FilePath: \datalized-crm-ui\datalized-crm-ui\src\views\test\index.vue
-->
<template>
    <div>
        <ComponentA />
        <ComponentB />
        
          <hr>
          展示一下过度
          <div>
            <a-button type="primary" @click="isShow=!isShow">显示/隐藏</a-button>
            <transition name="mez" appear @afterEnter="handleEnter"
            @after-leave="handleLeave"
            @appear="handleAppear"
            @after-appear="myhandleEnter"
            @before-enter="myEnter"
            @enter="handleEnter"
            
            @leave="handleLeave">
            
                <h1 v-show="isShow" >测试文本</h1>
            </transition>
          </div>
    </div>
</template>

<script>

import ComponentA from './brotherA.vue'
import ComponentB from './brotherB.vue'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
export default {
    name: 'Test',
    data() {
        return {
            searchItemWidth:'200px',
            isShow:true
        };
    },
    methods: {
        handleEnter(){
            console.log('after-enter');
        },
        handleLeave(){
            console.log('after-leave');
        },
        handleAppear(){
            console.log('appear');
        },
        handleEnter(){
            console.log('enter');
        },
        handleLeave(){
            console.log('leave');
        },
        myEnter(){
            console.log('before-enter');
        },
        myhandleEnter(){
            console.log('after-appear');
        },

    },
    components: {
        ComponentA,
        ComponentB
    },

}
</script>

<style lang="less" scoped>
// @import '~@assets/less/common.less';

h1{
    background-color: rgb(98, 57, 133);
}
.mez-enter-active{
    animation: identifier 1s linear;
}
.mez-leave-active{
    animation: identifier 1s linear reverse;
}

@keyframes identifier {
    from{
        transform: translateX(-100%);
    }
    to{
        transform: translateX(0px);
    }
}
</style>