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

Answer 2

编辑：根据新的小提琴改变答案。

在大多数情况下，CSS转换必须适用于已定义的属性。

另外，更改伪:after元素content将使元素被删除并重新添加，同时删除所述属性。

我在预先设置color的同时制作了动画文字background-color和content的演示，因此属性已经存在。

CSS：

div {
    width: 200px;
    transition: all .5s linear;
    background: red;
}
div:after {
    transition: all .5s linear;
    background: red;
    color: red;
    content: 'Test';
}
.test{
    background: blue;
}
.test:after{
    background: #0c0;
    color: black;
}

小提琴：http://jsfiddle.net/W5e9Q/10/

Answer 3

这里有两件事情。

1。）transition仅在有从转换时才有效。由于您的:after元素基本上是在添加类test时创建的，因此无法进行转换。

2。）transition不继承，所以你需要再次在伪元素上声明它。

Here's a quick n' dirty fork of your JSFiddle。

我将伪元素的通用规则移到了无类div并向其添加了transition。然后，当向其中添加类test时，背景会发生变化，并且可以从其旧值开始转换。

如果您不希望伪元素的content始终可见，请考虑将其隐藏opactiy: 0并将其转换为1，或使用transparent } background和/或color的颜色值。

如何在添加或删除类时淡入淡出CSS“：after”伪元素

3 个答案: