时间戳

首页 > 解决方案 > Vue 动画是即时的（无持续时间）

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

问题描述

我完全根据文档创建了 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 以获取工作示例。

标签： javascriptvue.jsanimation

解决方案

您错误地将选择器嵌套在内部.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;
}

推荐阅读