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.

我还添加了 aclass以使用transitionand为伪元素设置动画width。需要fade在父对象的同时进行动画处理。

问题

如果你看到这个FIDDLE，你会注意到第一次点击预期的行为是伪元素增长0到形式，100%但100%没有增长。

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

题

我注意到检查员设置display:none元素会使伪元素消失。

这导致元素不能从0到，100%因为不存在。

任何人都知道如何阻止这种行为或如何避免元素的不渲染。我想知道表单伪元素被渲染，如果他们需要一个可见的父元素

此问题不会发生visibiliy或opacity仅发生在display

Answer 1

我认为这个问题在于 CSS 的工作原理transition。正如您所知，当元素的属性从一个值更改为另一个值时，将应用 css 转换。

但在您的场景中，该属性实际上并没有改变。当其父元素位于属性中时，伪元素不存在display: none。因此，当您调用 时fadeToggle()，元素将变为display: block，然后创建伪。

但它立即就已经受到.clicked父类的影响，这给了伪类一个width: 100%属性。

因此，本质上，该width属性永远不会改变。它从“不存在”到“ 100% ”，因此不应用任何转换。

编辑

因此，您真正需要的是将类的应用顺序恢复.clicked到淡入淡出开始后：

更新了小提琴

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