Vue关闭模态过渡样式未触发答案

【问题标题】：Vue closing modal transition styling not triggeredVue关闭模态过渡样式未触发
【发布时间】：2020-10-16 08:53:37
【问题描述】：

在一个 Vue 组件中（我在 Drupal 8 项目的 twig 模板中注册）我有一个

<transition appear name="fade">
My modal
</transition>

模态框关闭时的以下 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>

当我打开模式时，过渡工作正常。但是当我关闭模态框时，我的样式不起作用？

【问题讨论】：

标签： css vuejs2 drupal-8 vue-transitions

【解决方案1】：

我想通了。在我的模态组件中，当我将 <transition appear name="fade"> 直接放在 <template> 标记下时，它可以工作。

【讨论】：