Add animation when sub-modes disappear in the header

[jseminck]

One of the things which I absolutely like about Code Sandbox is that it has a lot of fast smooth transitions in the UI. Actually, I have found inspiration from your work and applied to it to my own works, so thanks for that! 😄

One small thing disturbed me though. There's a very nice animation when hovering over the current mode to show the sub-modes, but there is no "leaving" animation:

I tried adding a leaving animation (first commit). It wasn't that hard, and worked fine initially:

However, I quickly discovered a nasty side effect: the mode changes instantly, so when clicking a mode, it looks a bit weird:

I tried two things:

• Only changing all the modes after the animation ended; didn't work out so well because the selected mode would switch when animation ends, which looked odd
• Change the selected mode initially, but only swap the sub-modes after the animation ended. This worked out quite nice:

I think I understood why there was no animation (yet?) as it wasn't easy to find something that works nicely. But I think the above approach works quite well and looks quite nice. I don't know if this is something you want, but if you do feel free. It was at least fun to look into this. 😄

[CompuIves]

This was really interesting and fun to read, really nice work on the writeup and the animation! I indeed didn't do the fade out because it was a complicated thing to solve, and I'm really glad to see that you solved it.

I'll merge this in now, thanks for your help on this. Very impressive.