html - Vue.js 让动画无法按预期工作

Question

demo非常简单，类似于 Vue.js 文档中的示例。

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

p {
  width: 100px;
  border: 1px solid red;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 5s;
}

.fade-enter {
  opacity: 0;
  width: 500px;
  background: red;
}

.fade-enter-to {
  background: black
}

.fade-leave {
  opacity: 0;
  background: red
}

.fade-leave-to {
  background: black;
  width: 1000px;
  opacity: 1
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

问题是，当离开动画开始时，它似乎从 DOM 中移除(v-if 为 false)，速度太快以至于没有任何动画完全没有!

但是，如果我删除 opacity，动画就会工作! 为什么不透明度很重要？

.fade-leave {
  /* opacity: 0; */
  background: red;
} 

.fade-leave-to {
  background: black;
  width: 1000px;
  /* opacity:1; */
}

---

还有一个问题，我原以为离开动画应该是DOM背景先变红(结果是没有或者说不出来)，然后慢慢变黑。那么，是我的错觉吗？

Answer 1

不透明度很重要，因为动画会根据它淡化。

在这里，我直接将 0 的不透明度添加到 Hello 按钮的类 fade-enter-active 中。您可以看到动画逐渐淡出。

相反，不透明度为 1 时，您的褪色没有方向。它保持在 1。