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
5 Replies
Here is the whole code: https://github.com/harunjonuzi/App-Todoology
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.
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
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.
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 0frhttps://www.youtube.com/watch?v=B_n4YONte5A
https://codepen.io/z-/pen/NWOaBry/61b0a7d9522241945daeb0eb0dc9e5e0
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-...