![]() ![]() We plan to detect the default animations and common customizations, then reinterpret them as compositor-driven animations for a nice performance boost. However, this means the animation runs on the main thread, which isn't ideal, particularly during page loads. We chose to animate width and height on transition groups by default because it's much easier to customize. There's lots of work to do, and we'd rather land it 'right' than 'fast', but it's definitely a priority for us. We also want to make it easier to know what kind of page you're transitioning from, preferably without needing to write JavaScript. Right now we're using a meta tag:, but we think CSS is a better place for this. To move this forward we need to figure out how each page opts into the transition. Here's a super-simple demo, and a more complex demo. Our prototype of this behind the chrome://flags/#view-transition-on-navigation flag. The only difference is, instead of startViewTransition signaling the DOM state change, the navigation itself will signal that change. The View Transitions API was designed so it can work across same-origin documents. This is the one I think most developers want us to work on next, and the good news is that we're already working on it! These aren't in priority order (well, maybe the first one is the most important for a lot of folks), so we'd love feedback on which additions are the most important to you. Here's a sneak preview of what we're thinking. We've already sketched some extensions to this feature to ensure the parts we're shipping today are future-compatible. This release is a small-but-hopefully-useful part of a bigger picture. ![]() If that's not something you're familiar or comfortable with, reach out to me on Twitter, Mastodon or via email, and I'll help. We hope we've already found all the bugs, but please file any issues you find at, preferably with a reduced demo. The functionality landing in Chrome 111 is just the first release. We don't know if or when other browsers will adopt View Transitions, but keep an eye on Mozilla's standards position, and WebKit's standards position. We developed this feature within the CSS Working Group, with input from other browser vendors and independents. The guide includes a helper function that you can use across browsers, but only browsers that support view transitions will get the animation. The View Transition API is currently only available in Chrome thankfully it can be used as a progressive enhancement. If there's something you feel isn't covered there, please reach out to me on Twitter, Mastodon, or via email. To get to grips with the feature, and play with some demos, check out our guide. An earlier prototype of this feature was much less flexible, and folks (like you?) who took the time to play with the prototypes and provide feedback triggered a total rethink. That sounds like we're patting ourselves on the back, but developer feedback was key to the design of this feature. These kinds of transitions were a frequently-requested feature from developers, including me, and I think we've managed to land it in a way that balances good defaults with extensibility and customization. Transitions created with the View Transition API. All rights reserved.The View Transition API lets you update the DOM in a single step, while generating an animated transition between the two states.
0 Comments
Leave a Reply. |