css - 显示 :none Removing Pseudo-elements

Question

嗨，我是回答这个 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 为伪元素设置动画。需要在父级上的 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 类的应用顺序恢复到 淡入淡出开始后:

Updated Fiddle

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