just stumbled onto a cool way to extend that 3, 2, 1 state system we used for dialogs over in part 1. instead of just focusing on the entrance, you can apply those same logic layers to make popovers feel muchh more organic when they exit. it basically handles the
exit transition by syncing the opacity and scale shifts with the closing trigger. i love how this makes the UI feel less
static bouncy and alive.
it feels like magic when the timing is perfect using only css. if you use
transition-behavior: allow-discrete;
, you can actually animate these states without needing heavy javascript listeners. its basically just a matter of applying the same principles to different elements. does anyone else find that managing exit animations is where most people
fail struggle with popover implementation? i am still trying to figure out the best way to handle nested popovers without breaking the timing
more here:
https://master.dev/blog/in-n-out-animations-popovers-part-2-3/