部分不透明度的過渡

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.