I currently manage a Container-Popup (a Visual Element that contains other child elements) using two classes: Popup-Hide and Popup-Show.
The only difference between Popup-Hide and Popup-Show is that Popup-Hide has a slight transform offset to the top-right and applies an animation over 1 second.
When Popup-Hide is applied and removed, the parent element becomes transparent first, making the child elements appear as if they disappear later.
How can I ensure the child elements fade out naturally at the same time as the parent?
.Popup-Show {
width: 35%;
height: 35%;
background-image: none;
position: absolute;
left: 32.5%;
top: 32.5%;
translate: 0 0;
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: all 1s;
}
.Popup-Hide {
width: 35%;
height: 35%;
background-image: none;
position: absolute;
left: 32.5%;
top: 32.5%;
translate: 5% -5%;
transition: all 1s;
opacity: 0;
visibility: hidden;
pointer-events: none;
}