vue-antd-admin-skeleton/src/components/transition/PageToggleTransition.vue

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

<script>
  import animates from '@/config/animates'

  export default {
    name: 'PageToggleTransition',
    props: {
      animate: {
        type: String,
        validator(value) {
          return animates.findIndex(item => item.name == value) != -1
        },
        default: 'bounce'
      },
      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
      }
    },
    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;
  }
  .page-toggle-enter{
  }
  .page-toggle-leave-to{
  }
</style>