保持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;
}