Email or username:

Password:

Forgot your password?
Top-level
Adam Argyle

all I'm doing is taking the contents of the <pre> and calling document.startViewTransition() before I inject the authored styles, browser does the rest

4 comments
Eric A. Meyer

@argyleink Wouldn’t most of that work with a basic `transition` applied to the whole document tree? I’m struggling to understand what View Transitions bring to this particular party.

Adam Argyle

@Meyerweb it animated `display: none` in the vid which isnt something `transition` can do, but i hear ya here

i see it less as a capability, in this demo, and more of a smoother transition between code edits; you get to watch your work animate into the final state. not jarring or instant, it interpolates to whatever you most recently defined. all with 1 API call to tell the browser you're about to change stuff.

it's also keyframes and not a `transition`, which is a distinction and limitation

Eric A. Meyer

@argyleink Those changes are indeed super nice! And I thought we could animate between discrete values now, but I might’ve gotten a little too far out ahead of the platform’s skis on that one.

Adam Argyle

@Meyerweb we can time discrete values now to sync with our other transitions indeed, via `transition-behavior: allow-discrete`! we also have `calc-size()` and `interpolate-size: allow-keywords` for transitioning to `height: auto` and a fixed value.

but like, here in this demo, the JS just sets some elements to `display: none` and view transitions let me customize stage entry, exit and move.

codepen.io/argyleink/pen/VwBKj

lots-o-control 🤘🏻

Go Up