Animating the dialog element using view transitions

Title “Animating The Dialog Element Using View Transitions”, a small Hello World button in the top right transitioning in dialog with a Close button, alongside a CSS snippet for dialog::backdrop and an HTML snippet with button command=show-modal targeting a dialog.

Rik Schennink animates <dialog> with the View Transitions API as a progressive enhancement, behind a check for prefers-reduced-motion and startViewTransition support. The trick: set view-transition-name on the button and its label, intercept the Invoker Commands API command and cancel events, then move those names onto the dialog and its title inside startViewTransition() to morph button into modal.

pqina.nl/blog/animating-the-dialog-element-using-view-transitions

Tags animation css dialog viewtransition