Vue动画是即时的（无持续时间）

Question

我完全根据documentation创建了Vue动画：

1. transition组件具有name="fade"属性
2. v-if在transition的孩子中
3. 样式是从文档中复制的

new Vue({
  el: '#app',
  template: `
<transition name="fade">
  <div 
    class="NotificationBar" 
    v-if="show" 
    :class="{
      NotificationBar__Success: currentNotificationType === notificationBarTypes.success
    }" 
    @click="show = !show"
  >
    <div class="NotificationBar-Centerer">
      <svg class="NotificationBar-Icon-SvgCanvas" viewBox="0 0 24 24">
        <path class="NotificationBar-Icon-SvgPath" v-if="currentNotificationType === notificationBarTypes.success" d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"></path>
      </svg>
      <div class="NotificationBar-Text">{{ message }}</div>
    </div>
  </div>
</transition>
  `,
  data: {
    show: true,
    currentNotificationType: 'success',
    message: 'OK',
    notificationBarTypes: {
      success: 'success'
    }
  }
})

在样式上，我为实验设置了10秒：

.fade-enter-active, .fade-leave-active {
    transition: opacity 10s;
}
.fade-enter, .fade-leave-to {
    opacity: 0;
}

为什么动画是即时的（持续时间为0s）。

请检查JSFiddle是否有working example。

Answer 1

您错误地将选择器嵌套在.NotificationBar中（在SCSS中）。确保选择器未嵌套，以便样式正确应用。

// Do not nest these inside another selector, or make sure
// whatever selector you use here will apply to your element

.fade-enter-active, .fade-leave-active {
  transition: opacity 10s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}