具有部分不透明度的过渡

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.