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>
    <div v-else><slot></slot></div>
</template>

<script>
import { globalConfig } from '@/config';

const animates = globalConfig.animates.preset;

export default {
    name: 'PageToggleTransition',
    props: {
        disabled: {
            type: Boolean,
            default: false,
        },
        animate: {
            type: String,
            validator(value) {
                return animates.findIndex(item => item.name == value) != -1;
            },
            default: 'bounce',
        },
        direction: {
            type: String,
        },
        reverse: {
            type: Boolean,
            default: true,
        },
    },
    computed: {
        enterAnimate() {
            return this.activeClass(false);
        },
        leaveAnimate() {
            return this.activeClass(true);
        },
    },
    methods: {
        activeClass(isLeave) {
            let animate = animates.find(item => this.animate == item.name);
            if (animate == undefined) {
                return '';
            }
            let direction = '';
            if (this.direction == undefined) {
                direction = animate.directions[0];
            } else {
                direction = animate.directions.find(item => item == this.direction);
            }
            direction = direction == undefined || direction === 'default' ? '' : direction;
            if (direction != '') {
                direction =
                    isLeave && this.reverse ? this.reversePosition(direction, animate.directions) : direction;
                direction = direction[0].toUpperCase() + direction.substring(1);
            }
            let t = isLeave ? 'Out' : 'In';
            return animate.name + t + direction;
        },
        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;
}
</style>