vue,transition进入时没有动画效果

Question

dialog.vue文件：

<template>
  <div :id="id" :class="dialogWrapperCls">
    <transition name="fadeIn">
      <div
          :class="[prefixCls + '-mask']"
          :style="maskStyles"
          v-show="localVisible"
      ></div>
    </transition>
    <transition name="fadeEase">
      <div :class="[prefixCls + '-box-wrapper']" v-show="localVisible">
        <div :class="[prefixCls + '-box']">
          <template>
            <div :class="[prefixCls + '-body']">
              <p :class="[prefixCls + '-title']" v-if="title" v-html="title">{{title}}</p>
              <div :class="[prefixCls + '-content']" v-if="$slots.default">
                <slot></slot>
              </div>
              <div :class="[prefixCls + '-content']" v-else-if="content" v-html="content"></div>
              <div v-if="!noFooter" :class="[prefixCls + '-footer']">
                <sea-button v-if="cancelText"
                            :custom-class="prefixCls + '-btn'"
                            :class="prefixCls + '-btn-cancel'"
                            @click="handleCancel">{{cancelText || 'Cancel'}}</sea-button>
                <sea-button v-if="confirmText"
                            :custom-class="prefixCls + '-btn'"
                            :class="prefixCls + '-btn-confirm'"
                            type="gradient"
                            @click="handleConfirm">{{confirmText || 'Ok'}}</sea-button>
              </div>
            </div>
          </template>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  const prefixCls = 'sea-dialog';
  const EVENT_CLOSE = 'on-close';
  const EVENT_CANCEL = 'on-cancel';
  const EVENT_CONFIRM = 'on-confirm';
  import SeaButton from '@/packages/button/m';

  
  export default {
    name: 'SeaDialog',
    mixins: [],

    components: {
      SeaButton
    },

    props: {
      // 弹窗的标识符
      id: {
        type: [String, Number]
      },
      // 标题文字
      title: {
        type: String,
        default: ''
      },
      // 弹窗内容
      content: {
        type: String,
      },
      // 是否显示底部按钮
      noFooter: {
        type: Boolean,
        default: false
      },
      // 取消按钮文字
      cancelText: {
        type: String,
        default: ''
      },
      // 关闭时回调
      onCancelCb: {
        type: Function,
      },
      // 确认按钮文字
      confirmText: {
        type: String,
        default: ''
      },
      // 确定时回调
      onConfirmCb: {
        type: Function,
      },
      // 弹窗关闭回调
      closeCb: {
        type: Function,
      },
      // 自定义样式
      customClass: {
        default: ''
      },
      // 点击蒙层是否可以关闭对话框
      maskClosable: {
        type: Boolean,
        default: true
      },
      maskBgStyle: {
        type: String,
        default: 'rgba(0, 0, 0, 0.3)'
      }
    },

    data() {
      return {
        prefixCls: prefixCls,
        localVisible: true
      }
    },

    computed: {
      maskStyles() {
        return `background: ${this.maskBgStyle}`
      },
      dialogWrapperCls() {
        return [
          `${prefixCls}`,
          `${this.customClass}`
        ];
      }
    },

    watch: {},

    created() {
    },

    mounted() {
    },

    destroyed() {
    },

    methods: {
      _close(event) {
        this.$emit(EVENT_CLOSE, event);
        if (typeof this.closeCb === "function" &&  this.closeCb) {
          this.closeCb(event);
        }
        this.localVisible = false;
      },
      handleCancel(event) {
        this.$emit(EVENT_CANCEL, event);
        if (typeof this.onCancelCb === 'function') {
          this.onCancelCb && this.this.onCancelCb()
        }
        this._close();
      },
      handleConfirm(event) {
        this.$emit(EVENT_CONFIRM, event);
        if (typeof  this.onConfirmCb === 'function') {
          this.onConfirmCb && this.this.onConfirmCb()
        }
        this._close();
      }
    }
  }
</script>

<style lang="less" scoped>
</style>

css:

@dialog-prefix-cls: ~"@{css-prefix}dialog";  
  
.@{dialog-prefix-cls} {  
  //position: fixed;  
 //top: 0; //right: 0; //bottom: 0; //left: 0; //z-index: 999;  
  &-mask {  
    position: fixed;  
    top: 0;  
    right: 0;  
    bottom: 0;  
    left: 0;  
    z-index: 999  
  }  
  
  &-box-wrapper {  
    position: fixed;  
    top: 0;  
    right: 0;  
    bottom: 0;  
    left: 0;  
    z-index: 1000;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
  
    .@{dialog-prefix-cls}\-box {  
      width: 80%;  
      background-color: @color-bg-transparent;  
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);  
      border-radius: 10px;  
  
      .@{dialog-prefix-cls}\-body {  
        font-size: @font-size-large;  
        text-align: center;  
        color: @color-base;  
  
        .@{dialog-prefix-cls}\-title {  
          font-weight: bold;  
          margin-top: 28px;  
          margin-bottom: 28px;  
        }  
  
        .@{dialog-prefix-cls}\-content {  
          margin: 30px 20px;  
          overflow-y: auto;  
          max-height: 140px;  
  
          &::\-webkit-scrollbar {  
            width: 0 !important;  
          }  
        }  
      }  
  
      .@{dialog-prefix-cls}\-footer {  
        display: flex;  
  
        .@{dialog-prefix-cls}\-btn {  
          flex: 1;  
          line-height: 44px;  
          height: 44px;  
          font-size: @font-size-large;  
  
          &.@{dialog-prefix-cls}\-btn-cancel {  
            border-radius: 0 0 0 10px;  
            border: none;  
            border-top: 1px solid @border-color-base;  
          }  
  
          &.@{dialog-prefix-cls}\-btn-confirm {  
            border-radius: 0 0 10px 0;  
          }  
        }  
      }  
    }  
  }  
  
  .fadeEase-enter-active {  
    animation: fadeOut 0.36s;  
  }  
  
  .fadeEase-leave-active {  
    animation: fadeOut 0.36s reverse;
  }  
  
  @keyframes fadeOut {  
    0% {  
      bottom: -300%;  
      //transform: scale(0);  
  }  
    100% {  
      bottom: 0;  
      //transform: scale(1);  
  }  
  }  
  
  .fadeIn-enter-active {  
    animation: fadeIn .36s;  
  }  
  
  .fadeIn-leave-active {  
    animation: fadeIn .36s reverse;  
  }  
  
  @keyframes fadeIn {  
    from {  
      opacity: 0;  
    }  
  
    to {  
      opacity: 1;  
    }  
  }  
}

为什么进入时没有动画效果，离开的时候有动画效果呢？

Answer 1

解决了，样式写的有问题