Display:none移除伪元素

Question

你好，我正在回答这个问题，并且注意到一个奇怪的行为。

背景

我的HTML结构如下：

<div class="btn">
    Click me
</div>
<div class="element">
    Div Box With Pseudo Element
</div>

并且CSS ^{只是相关的}

.element {
    display:none;
}
.element:after {
    content:" ";
    display:block;
    width:0;
    background:black;
    transition:6s ease;
}
.element.clicked:after {
    width:100%;
}

需要将 element 设置为 display:none，并在单击 btn 元素时显示/隐藏它。使用 Jquery 和 fadeToggle 可以很好地解决这个问题。

同时，在伪元素中添加一个 class，使用 transition 和 width 进行动画效果。需要在父元素的淡入淡出同时执行动画。

问题

如果您查看此FIDDLE，可以注意到在第一次单击时，伪元素应该从0增长到100%，但实际上是100%而没有增长。

如果您再次单击，则会从100%更改为0

问题

我注意到，将 display：none 设置为元素会使伪元素消失。

这会导致元素无法从0到100％，因为它不存在。

有人知道如何停止这种行为或如何避免元素的不可见。我想知道伪元素是如何呈现的，以及它们是否需要一个可见的父级。

这个问题不会发生在visibility或opacity中，只会发生在display中。

- DaniP

---

"display: none" 的效果不是创建一个不可见的盒子，而是根本没有创建盒子。因此，从浏览器的角度来看，就不存在 div 元素。 - Pogrindis

fadeToggle设置元素在完成后显示为：none。为什么不使用CSS制作动画呢？http://jsfiddle.net/857dxph1/3/ - Jonas Grumann

@Pogrindis 说得好。我认为既然元素仍然存在于 DOM 中，伪元素就没有消失的理由。 - DaniP

@JonasGrumann 因为该元素需要 display:none。 - DaniP

我使用的是 jQuery v1.11.0 而不是 2.x，没有出现任何问题。也许你需要检查一下你的版本。（这是在 IE11 中发生的） - amazedinc

Answer 1

我认为这个问题在于CSS transition的工作原理。正如你所知道的，当一个元素的属性从一个值变成另一个值时，就会应用css transiton。

但是在你的情况下，实际上属性并没有发生变化。当一个伪元素的父元素处于display: none属性时，伪元素是不存在的。因此，当调用fadeToggle()时，元素变成display: block，然后才创建伪元素。

但是它立即受到父元素的.clicked类的影响，给了伪元素一个width: 100%的属性。

因此，本质上width属性永远不会被改变。它从"不存在"变成"100%"，因此没有应用任何过渡效果。

编辑

所以，你真正需要做的是颠倒.clicked类的应用顺序，在淡入淡出开始之后再应用：

已更新的Fiddle

$('.element').stop().fadeToggle(3000).toggleClass('clicked');

- LcSalazar