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，动画就会生效！ 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。