10

我知道在 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");
});

任何帮助和提示将不胜感激。

4

3 回答 3

5

分叉@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;
}
于 2013-10-22T09:42:21.550 回答
1

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

在大多数情况下，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/

于 2013-10-22T09:24:08.307 回答
1

这里有两件事。

1.)transition仅在需要从. 由于您的:after元素本质上是在将类test添加到其中时创建的，因此不会进行转换。

2.)transition不继承，因此您需要在伪元素上再次声明它。

这是您的 JSFiddle 的快速 n' 脏叉子。

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

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

于 2013-10-22T09:33:08.033 回答