css - 添加或删除类时如何淡入和淡出 CSS ":after"伪元素

Question

我知道还有很多关于在 CSS 伪元素上使用过渡的其他问题，但在经历了一大堆问题之后，我仍然无法让我的场景正常工作。

基本上，我想向元素添加一个类，该类有一个 :after 伪元素，其中包含一些内容和背景。我希望在添加或删除类时对 :after 元素产生淡入淡出的效果。

我一直在这个 jsfiddle 中尝试这个和我到目前为止的代码是这样的:

HTML

<div id="divA">Div test</div>
<button id="btnAdd">Add it</button>
<button id="btnRemove">Take Away</button>

CSS

div {
    width: 200px;
    transition: all .5s linear;
    background: red;
}

.test{
     background: blue;
}

.test:after{    
    background: #0c0;
    content: "Test";
}

jQuery

$("#btnAdd").click(function() {
  $("#divA").addClass("test");
});

$("#btnRemove").click(function() {
  $("#divA").removeClass("test");
});

如有任何帮助和提示，我们将不胜感激。

Answer 1

fork @NilsKaspersson 的答案以使其符合您的要求。

Transition 意味着从 X 到 Y，你不能指望它能与新创建的属性一起工作。

然后您必须创建一个初始属性，并在以后更改它。

因为你不希望它一开始就在那里，所以就用color: transparent;和background: transparent;

Running Demo

代码:

div {
    width      : 200px;
    transition : all .5s linear;
    background : red;
}

div:after {
    transition : all .5s linear;
    background : transparent;
    color      : transparent;
    content    : "Test";
}

.test{
    background : blue;
}

.test:after{
    background : #0c0;
    color      : black;
}