关于CSS动画过渡的问题

最近在用VUE做弹出框，想做一个渐入渐出的效果。

先来看看平常动画的实现

.div{
    position:absolute;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
.div:hover{
    opacity:0;
}

在这里，确实是能正常使用，但是弹出框不一样。

首先弹出框需要一个遮罩层，如果只是透明度的变化，遮罩层会使得网页全都无法点击。

所以这里我需要同时改变另一个属性，display:none; 

在透明度过渡完成的时候同时添加一个display:none;的属性。

所以就有了下面的代码

<template>
  <div
    :class="isShow ? 'zbox-dialog-show' : ''"
    class="modal zbox-dialog-wrap"
    tabindex="-1"
    role="dialog"
    ref="zbox_dialog_only"
  >
    <div class="modal-backdrop fade show"></div>
    <div
      class="modal-dialog window-popup restore-password-popup"
      role="document"
    >
      <div class="modal-content">
        <a
          href="javascript:void(0)"
          class="close icon-close"
          data-dismiss="modal"
          aria-label="Close"
          @click="close"
        >
          <svg class="olymp-close-icon">
            <use
              xlink:href="../../../lib/svg-icons/sprites/icons.svg#olymp-close-icon"
            ></use>
          </svg>
        </a>
        <div class="modal-body"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Dialog",
  data() {
    return {
      isShow: false
    };
  },
  components: {},
  mounted() {},
  created: function() {},
  computed: {},
  methods: {
    show() {
      this.isShow = true;
      this.$refs.zbox_dialog_only.setAttribute(
        "style",
        "display: inline-block;"
      );
      setTimeout(() => {
        this.$refs.zbox_dialog_only.setAttribute(
          "style",
          "display: inline-block;opacity: 1;"
        );
      }, 300);
    },
    close() {
      this.isShow = false;
      this.$refs.zbox_dialog_only.setAttribute(
        "style",
        "display: inline-block;opacity: 0;"
      );
      setTimeout(() => {
        this.$refs.zbox_dialog_only.setAttribute(
          "style",
          "display: none;opacity: 0;"
        );
      }, 300);
    }
  }
};
</script>

<style scoped>
.zbox-dialog-wrap {
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
}
.zbox-dialog-wrap .modal-dialog {
  margin-top: 20%;
  z-index: 1100;
}
</style>