如何在添加或删除类时淡入淡出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

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

转换意味着从 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;
}