保留一個CSS屬性，直到另一端的過渡

Question

我使用after僞元素來模擬漸變過渡，但是我的漸變可能會不同，所以我爲它們中的每一個創建了一個類，並將它們應用於JS我需要他們。當然，在一般的::after中，我指定了transition: opacity 1s;，並且在每個漸變類中我都有一個背景和opacity: 1;。現在我偶然發現了一個問題，我需要反轉過渡，但這並不容易，因爲（因爲我使用JS），我正在移除該類，這意味着不透明度轉換當然仍會運行，但是背景被立即刪除。如何保持背景直到不透明度過渡結束？

的jsfiddle：http://jsfiddle.net/5c7xfwLw/

Answer 1

我更新了你的提琴：

http://jsfiddle.net/5c7xfwLw/1/

因爲你淡出你不需要去除背景，這樣你可以簡單地做的不透明度動畫。

.green:after { 
    background: -webkit-linear-gradient(#53FF40, transparent 50%); 
} 
.fade-after::after { 
    opacity: 1; 
}