保留CSS属性，直到另一端的过渡为止

Question

我使用后伪元素模拟梯度过渡，但是我的梯度可以不同，因此我为每个类别创建了一个类，并在需要时用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;
}