部分不透明的过渡

Question

我正在按照https://vuejs.org/v2/guide/transitions.html 此处的指南为弹出窗口及其叠加层设置动画。我需要最终不透明度为 0.5 的叠加层，但 Vue 最后将其设置为 1。我尝试了类似的方法，但 Vue 将不透明度设置为 0.5，并在动画结束时将其突然更改为 1：

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 2s;
}
.fade-enter-to {
  opacity: 0.5;
}

这是一个说明问题的测试https://jsfiddle.net/50wL7mdz/58865/

更新

工作解决方案https://jsfiddle.net/50wL7mdz/58877/ 无需将最终不透明度添加到淡入淡出类。

Answer 1

您还需要在.overlay 类上设置不透明度（这是过渡完成后将使用的）：

.overlay {
  width: 50px;
  height: 50px;
  background-color: red;
  opacity: 0.5;
}

Here's a fiddle.