部分不透明的过渡

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/无需在渐变类中添加最终的不透明度。