一、引用

此教程基于 Vue3 + Ant Design Vue ，动画效果基于animate.css

二、动画效果

三、标签页组件

 <router-view ref="tabContent" v-slot="{ Component }">
    <page-toggle-transition :animate="animate.name" :disabled="animate.disabled" :direction="animate.direction">
        <keep-alive :include="keepAliveList" :exclude="data.exc">
            <component v-if="!refreshing" :is="wrap(route.name, Component)" :key="route.name"/>
        </keep-alive>
    </page-toggle-transition>
</router-view>

四、PageToggleTransition.vue

<template>
    <transition
            v-if="!disabled"
            :enter-active-class="`animated ${enterAnimate} page-toggle-enter-active`"
            :leave-active-class="`animated ${leaveAnimate} page-toggle-leave-active`"
    >
        <slot></slot>
    </transition>
    <template v-else>
        <slot></slot>
    </template>
</template>

<script setup>
import {preset as animates} from '@/config/default/animate.config'
import {computed, defineProps} from "vue";
import {useRoute} from "vue-router";

const route = useRoute();
const props = defineProps({
    disabled: {
        type: Boolean,
        default: false
    },
    animate: {
        type: String,
        validator(value) {
            return animates.findIndex(item => item.name === value) !== -1
        },
        default: 'flip'
    },
    direction: {
        type: String,
        validator(value) {
            return ['x', 'y', 'left', 'right', 'up', 'down', 'downLeft', 'upRight', 'downRight', 'upLeft', 'downBig',
                'upBig', 'downLeft', 'downRight', 'topRight', 'bottomLeft', 'topLeft', 'bottomRight', 'default'].indexOf(value) > -1
        }
    },
    reverse: {
        type: Boolean,
        default: true
    }
});

const enterAnimate = computed(() => {
    return activeClass(false)
})

const leaveAnimate = computed(() => {
    return activeClass(true)
})

function activeClass(isLeave) {
    let animate = animates.find(item => props.animate === item.name)
    if (animate === undefined) {
        return ''
    }
    let direction
    if (props.direction === undefined) {
        direction = animate.directions[0]
    } else {
        direction = animate.directions.find(item => item === props.direction)
    }
    direction = (direction === undefined || direction === 'default') ? '' : direction
    if (direction !== '') {
        direction = isLeave && props.reverse ? reversePosition(direction, animate.directions) : direction
        direction = direction[0].toUpperCase() + direction.substring(1)
    }
    let t = isLeave ? 'Out' : 'In'
    return animate.name + t + direction
}

function reversePosition(direction, directions) {
    if (direction.length === 0 || direction === 'x' || direction === 'y') {
        return direction
    }
    let index = directions.indexOf(direction)
    index = (index % 2 === 1) ? index - 1 : index + 1
    return directions[index]
}
</script>

<style lang="less">
.page-toggle-enter-active {
  position: absolute !important;
  animation-duration: 0.8s !important;
  width: calc(100%) !important;
}

.page-toggle-leave-active {
  position: absolute !important;
  animation-duration: 0.8s !important;
  width: calc(100%) !important;
}

.page-toggle-enter {
}

.page-toggle-leave-to {
}
</style>