vue.js过渡不适用于模式的背景

Question

https://codepen.io/rabelais88/pen/aKeRKY

我正在创建具有可重用背景（<Backshade>）的模态组件。问题是，当我应用过渡效果时，背景会过早消失或显得太迟。目前，背景是作为Vue组件实现的，所以我认为性能存在问题，将背景重新分配为纯素div，但没有运气。

现在，背景是模式主体的同级对象，但是当我尝试将背景作为模式的父对象时，它也无法正常工作。

对于动画，我使用了animated.css，通常与Vue.js过渡效果配合得很好。

<script type="text/x-template" id="modal-template">
  <transition
   enter-active-class="animated pulse"
   leave-active-class="animated zoomOut">
    <div @click="close">

      <Backshade :zIndex="zIndex - 1">
      </Backshade>

        <div class="modal container">
          <div class="message">
            <slot name="message">
              insert your message here
            </slot>
          </div>
        </div>

    </div>
  </transition>
</script>