Css Vue关闭模式转换样式未触发

在Vue组件中（我在Drupal8项目的twig模板中注册了该组件），我有一个

我的情态

模式关闭时的以下CSS样式：

<style scoped>
@-webkit-keyframes fade-out-bottom {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(50px);
      transform: translateY(50px);
      opacity: 0;
    }
  }
  @keyframes fade-out-bottom {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(50px);
      transform: translateY(50px);
      opacity: 0;
    }
  }

  .fade-enter, .fade-leave-active {
    -webkit-animation: fade-out-bottom 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220) both;
    animation: fade-out-bottom 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220) both;
  }

</style>

@-webkit关键帧淡出底部{
0% {
-webkit转换：translateY（0）；
变换：translateY（0）；
不透明度：1；
}
100% {
-webkit转换：translateY（50px）；
变换：translateY（50px）；
不透明度：0；
}
}
@关键帧在底部淡出{
0% {
-webkit转换：translateY（0）；
变换：translateY（0）；
不透明度：1；
}
100% {
-webkit转换：translateY（50px）；
变换：translateY（50px）；
不透明度：0；
}
}
.fade进入，.fade离开活动状态{
-webkit动画：淡出底部0.7s立方贝塞尔（0.895,0.030,0.685,0.220）二者；
动画：淡出底部0.7s三次贝塞尔（0.895,0.030,0.685,0.220）二者；
}

---

当我打开模态转换时，转换工作正常。但是当我关闭模态时，我的样式就不起作用了？

我发现了。在我的模态组件中，当我把

直接放在

标签下面时，它就工作了。

我明白了。在我的模态组件中，当我将

直接放在

标记下时，它会工作

<style scoped>
@-webkit-keyframes fade-out-bottom {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(50px);
      transform: translateY(50px);
      opacity: 0;
    }
  }
  @keyframes fade-out-bottom {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(50px);
      transform: translateY(50px);
      opacity: 0;
    }
  }

  .fade-enter, .fade-leave-active {
    -webkit-animation: fade-out-bottom 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220) both;
    animation: fade-out-bottom 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220) both;
  }

</style>