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%);
}
}
9 Replies
I cannot really see anything wrong in your code. It should work...
Try this simple example and see if this works for you
https://codepen.io/tok124/pen/oNrOrmZ
I can see the black box appearing and sliding in from the left without any problem. I think in my case the grid is causing some kind of inconvenience in the flow.
Can you maybe share your code in codepen? the html and CSS? Because from the code that you provided, everything looks normal
Yes, tomorrow I will try to transfer it to codepen. I'm going to sleep now. Thanks for the reply.
Alright, good night 🙂
What browser are you using ?
I don't think the browser is the issue since my pen worked for him.
Hello, I have created a codepen where the exact same thing is happening. I think it is due to the grid configurations. This codepen is much simpler than the real project but I think it sums up the spirit.
https://codepen.io/Nino-the-selector/pen/KKjLVvw
Im using the latest version in Chrome and Firefox.
Firefox doesn’t yet support @starting-style + display none but should work on chrome