How would you animate this sidebar toggle?

As you can see I try to use display: none, and it's working fine, because mainMenu expands to full width, but when i use display: none, it doesn't animate smoothly, I have transition: translate 200ms ease-in-out; in my sideMenu element
No description
No description
5 Replies
Harun
Harun14mo ago
GitHub
GitHub - harunjonuzi/App-Todoology: Literally the best todolist app...
Literally the best todolist application in my neighborhood. - GitHub - harunjonuzi/App-Todoology: Literally the best todolist application in my neighborhood.
Chris Bolson
Chris Bolson14mo ago
You can't animate from or to display:none. It is either hidden or displayed, there is no in-between state. If for some reason you do need to add display none, you could add that with a setTimeout() set to take effect after the translate has finished. Another option is to animate the opacity
Choo♚𝕂𝕚𝕟𝕘
It is not possible to animate display:none because there are no intermediate states. Common alternatives are to animate opacity to fade out of view or animate translation to move out of view. These can also be combined together along with using display:none at the end of the animation. Note that display:none causes movement to fill in the empty space, so using opacity without translation prior to display:none doesn't create a smooth transition, since the fade out will be smooth, but the movement will be sudden.
Zoë
Zoë14mo ago
You can use the 0fr grid trick. I use it in https://codepen.io/z-/pen/dygeoyO for the drop down (both width and height). Essentially you can make something animate between nothing and the width it wants to be 1fr So I would make the sidebar that you want to hide a grid with a single column set to 1fr and then when hiding animate to 0fr
Zoë
Zoë14mo ago
Kevin Powell
YouTube
The simple trick to transition from height 0 to auto with CSS
Animating or transitioning to and from height auto is, well, not really possible (though it is being worked on!), but luckily, there is actually a solution using CSS Grid that’s really easy to implement! 🔗 Links ✅ Keith J. Grant’s article on this (also includes a flexbox solution): https://keithjgrant.com/posts/2023/04/transitioning-to-height-...
Want results from more Discord servers?
Add your server