Probably old news now, but the CSS View Transition API is SUPER cool! Entry/exit layout animations like this used to be super complicated or require giant libraries. Now it's like 2 lines of JS, and a few lines of CSS if you want to customize the animation. Amazing! 🤯

Code:

yes! And here's a demo without the performance hit of using flushSync

flushSync is fine. This is the exact type of thing it is designed for. Actually in this case it may even be faster. When startViewTransition is called it freezes the DOM to take a snapshot. Flushing synchronously reduces the time the page is frozen because updates occur immediately rather than waiting unnecessarily.

Super clean. I immediately tried clicking the add button before the current transition had finished, finding that it then ignores that click. Limitation of freezing the DOM, or is there a way to stack the transitions?

Yeah it’s a limitation of the current API but I think the spec authors are aware of it so hopefully it’ll get better eventually

Is using the "flushSync" recommended for lists?

In this case it’s required for the view transition to take effect. The DOM updates have to occur inside that callback

can you drop that link pls? pretty excited to try it ...

No problem

Very very cool!