Problem with transition display: none
Hi friends, does anyone know why this doesn't work?
In reality it is working in only one direction.
Any collaboration is appreciated, greetings!
.navDrawer_containerFixed {
grid-area: drawer;
width: 22.5rem;
background-color: var(--md-sys-color-surface);
padding: 0 0.75rem;
z-index: 1001;
display: none;
opacity: 0;
transform: translateX(-100%);
transition-property: all;
transition-duration: 300ms;
transition-behavior: allow-discrete;
transition-timing-function: ease-in-out;
}
.navDrawer_container__visible {
display: block;
opacity: 1;
transform: translateX(0);
@starting-style {
opacity: 0;
transform: translateX(-100%);
}
}
In reality it is working in only one direction.
Any collaboration is appreciated, greetings!
.navDrawer_containerFixed {
grid-area: drawer;
width: 22.5rem;
background-color: var(--md-sys-color-surface);
padding: 0 0.75rem;
z-index: 1001;
display: none;
opacity: 0;
transform: translateX(-100%);
transition-property: all;
transition-duration: 300ms;
transition-behavior: allow-discrete;
transition-timing-function: ease-in-out;
}
.navDrawer_container__visible {
display: block;
opacity: 1;
transform: translateX(0);
@starting-style {
opacity: 0;
transform: translateX(-100%);
}
}
