Contact emails
nrosent...@chromium.org, vmp...@chromium.org, khushalsa...@chromium.org


Explainer
https://github.com/WICG/view-transitions/blob/main/nested-explainer.md#capture-modes


Specification
None


Summary

In its current form, we capture the view transition into an old&new snapshot 
and then cross-fade between them, also animating the transform to simulate 
motion. With layered capture, more CSS properties are captured as style instead 
of being baked into the snapshot: opacity, clipping, border, box-shadow, 
background, 3D, mask, filters, border-radius. This allows displaying a more 
correct animation when using nested view transitions, and also allows more 
expressiveness for view-transitions in general, as borders & shadow would 
animate logically rather than cross-fade.



Blink component
Blink>CSS


Motivation

The main need arises from nested view transitions. When there is a tree 
hierarchy of transitioning elements, suddenly tree effects like 
opacity/mask/3D/filter are rendered differently, as well as decorations that 
respond to overflow like border-radius & box-shadow. Without capturing the 
transitioning elements differently, those nested animations would look broken. 
In addition, it allows implementing view transitions that were not easily 
possible before regardless of nesting, such as animating the border-radius of a 
transitioning shared element. This was brought up by partner designs.



Initial public proposal
https://github.com/w3c/csswg-drafts/issues/10585


TAG review
None


TAG review status
Pending


Risks




Interoperability and Compatibility

None


Gecko: No signal

WebKit: No signal

Web developers: No signals

Other signals:


WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it 
has potentially high risk for Android WebView-based applications?

None




Debuggability

None



Is this feature fully tested by web-platform-tests?
No


Flag name on chrome://flags
None


Finch feature name
None


Non-finch justification
None


Requires code in //chrome?
False


Estimated milestones

No milestones specified



Link to entry on the Chrome Platform Status
https://chromestatus.com/feature/5159227115700224?gate=5184991819202560


This intent message was generated by Chrome Platform Status.

-- 
You received this message because you are subscribed to the Google Groups 
"blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to blink-dev+unsubscr...@chromium.org.
To view this discussion on the web visit 
https://groups.google.com/a/chromium.org/d/msgid/blink-dev/0000000000009c5b730620374e26%40google.com.

Reply via email to