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
Top-level
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
@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 @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. @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. https://codepen.io/argyleink/pen/VwBKjwj lots-o-control 🤘🏻 |
@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.