Post

Bramus
@bram.us

👨‍🔬 Experiment/Hack: Automatically triggered View Transitions thanks to MutationObserver Instead of adding `document.startViewTransition` at various places in your JS, this uses a MutationObserver to watch for DOM mutations. When a mutation occurs, it gets undone and then reapplied wrapped in a VT.

Bramus@bram.us

You can hack your way into this using MutationObserver. POC: codepen.io/bramus/pen/z... The observer undoes mutations like remove, and then reapplies that mutation wrapped in document.startViewTransition. (This is a remake of codepen.io/bramus/pen/o..., which has View Transition JS intermixed)

codepen.ioAutomatic View Transitions with MutationObserver...
Bramus
@bram.us

UPDATE: The post was updated to also tackle the checkbox use-case. It’s a very hacky workaround that, unfortunately, has a 1 frame glitch because I rely on my DIY CSS StyleObserver which can only respond to changes after rendering. It was a nice experiment though :)