显示：无删除伪元素

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 transiton。

但在您的情景中，该物业实际上并未发生变化。伪元素在其父元素位于display: none属性中时不存在。因此，当您调用fadeToggle()时，元素变为display: block并且然后创建伪。

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

所以，从本质上讲，width属性永远不会改变。它来自＆＃34; 不存在的＆＃34;到＆＃34; 100％＆＃34;因此，不会应用转换。

修改

所以，你真正需要的是在淡入淡出开始之后恢复.clicked类应用于的顺序：

Updated Fiddle

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