Display: none Remove pseudo-elements
Hi I answered this question and I notice strange behavior
Context
I have an HTML structure like this:
<div class="btn">
Click me
</div>
<div class="element">
Div Box With Pseudo Element
</div>
And CSS Only relevant
.element {
display:none;
}
.element:after {
content:" ";
display:block;
width:0;
background:black;
transition:6s ease;
}
.element.clicked:after {
width:100%;
}
If element
should be display:none
and should be shown / hidden when clicking an element btn
. This works great with JQuery and fadeToggle
.
Also I add class
to animate a pseudo element with transition
and width
. Need to animate at the same time fade
for the parent.
Problem
If you see this FIDDLE , you may notice that the expected behavior is clicked first when the pseudo-element grows in form 0
to 100%
, but 100%
doesn't grow instead .
If you click again, it will change from 100%
to0
Question
I noticed that the inspector found that setting display:none
on an element causes the pseudo element to disappear.
This leads to the fact that the element cannot be from 0
to 100%
, since it does not exist.
Does anyone know how to stop this behavior or how to avoid the element not rendering. I was wondering how the form pseudo-elements were formed and if they needed a visible parent
This problem does not occur with visibiliy
or opacity
only withdisplay
source to share
I believe this problem lies in the way CSS works transition
. As you well know, css transitor is applied when an element has a property changed from one value to another .
But in your scenario, the property doesn't actually change. The pseudo-element does not exist and its parent is in the property display: none
. So when you call fadeToggle()
, the element becomes display: block
and then pseudo is created.
But immediately this is already affected by the .clicked
parent class , which gives the pseudo property a width: 100%
.
Thus, the property width
never changes. This goes from "nonexistent" to "100%", so no transition is applied.
EDIT
So, you really need to revert the order in which the class is applied .clicked
after fade has run:
$('.element').stop().fadeToggle(3000).toggleClass('clicked');
source to share