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

我使用after伪元素来模拟渐变过渡，但是我的渐变可能会不同，所以我为它们中的每一个创建了一个类，并将它们应用于JS我需要他们。当然，在一般的::after中，我指定了transition: opacity 1s;，并且在每个渐变类中我都有一个背景和opacity: 1;。现在我偶然发现了一个问题，我需要反转过渡，但这并不容易，因为（因为我使用JS），我正在移除该类，这意味着不透明度转换当然仍会运行，但是背景被立即删除。如何保持背景直到不透明度过渡结束？保留一个CSS属性，直到另一端的过渡

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

来源

2015-05-09 User

你可以发布你到目前为止的小提琴吗，所以我们可以玩吗？通常在这样的情况下，我不得不在相关元素上使用两个类;第一次启动转换，第二次在转换完成时删除。 –

@LanceTurri我更新了这篇文章:) – User

我更新了你的提琴：

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

因为你淡出你不需要去除背景，这样你可以简单地做的不透明度动画。

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

来源

2015-05-10 01:24:35 Fetz

是的，我想过这个，但我正在寻找的只是一个班级 – User

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

回答

相关问题