部分不透明度的过渡

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.