Editorial review: Document element-scoped view transitions#44217
Editorial review: Document element-scoped view transitions#44217chrisdavidmills wants to merge 8 commits into
Conversation
github-actions
Bot
added
Content:WebAPI
chrisdavidmills
changed the title
github-actions
Bot
added
Content:CSS
|
|
||
| - `updateCallback` {{optional_inline}} | ||
| - : An optional callback function typically invoked to update the DOM during the SPA view transition process, which returns a {{jsxref("Promise")}}. The callback is invoked once the API has taken a snapshot of the current page. When the promise returned by the callback fulfills, the view transition begins in the next frame. If the promise returned by the callback rejects, the transition is abandoned. | ||
| - : An callback function, invoked to update the DOM during the SPA view transition process, which returns a {{jsxref("Promise")}}. The callback is invoked once the API has taken a snapshot of the current page. When the promise returned by the callback fulfills, the view transition begins in the next frame. If the promise returned by the callback rejects, the transition is abandoned. |
|
|
||
| ## Description | ||
|
|
||
| When a view transition is triggered, as part of [the process](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_process), the browser captures snapshots of elements that have a non-`none` {{cssxref("view-transition-name")}} set on them. These snapshots are then animated via CSS animations. The `view-transition-scope` property allows you to limit the scope inside which the browser will search for elements to snapshot to a particular DOM tree. |
There was a problem hiding this comment.
The last sentence reads a bit awkward. What does "limit the scope" really mean? I think we can be more concrete here without being too wordy.
The view-transition-scope property provides control over whether view-transition-names in an element's subtree are discoverable during the capture phase of a view-transition on an ancestor element or the document itself.
There was a problem hiding this comment.
The wording is a bit different now, but let me know if it still needs attention.
|
|
||
| When a view transition is triggered, as part of [the process](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_process), the browser captures snapshots of elements that have a non-`none` {{cssxref("view-transition-name")}} set on them. These snapshots are then animated via CSS animations. The `view-transition-scope` property allows you to limit the scope inside which the browser will search for elements to snapshot to a particular DOM tree. | ||
|
|
||
| When `view-transition-scope: all` is set on an element, it limits the scope of [element-scoped view transitions](/en-US/docs/Web/API/View_Transition_API/Using_element-scoped) to that element and its descendants. The default value, `view-transition-scope: none`, means that no scope limiting will take place. |
There was a problem hiding this comment.
view-transition-scope also applies to document view transitions. Again the term "scope limited" is rather vague here. When view-transition-scope: all is used, any view-transition-names in the element's subtree are not visible from the element's ancestors during the capture phase.
There was a problem hiding this comment.
Ah, got it. In my next commit, I've updated the page so that it isn't saying they are specific to element-scoped VTs.
|
|
||
| When `view-transition-scope: all` is set on an element, it limits the scope of [element-scoped view transitions](/en-US/docs/Web/API/View_Transition_API/Using_element-scoped) to that element and its descendants. The default value, `view-transition-scope: none`, means that no scope limiting will take place. | ||
|
|
||
| The `view-transition-scope` property was implemented so that element-scoped view transitions can be made self-contained. Whenever an element-scoped view transition is triggered, the browser automatically sets `view-transition-scope: all` on the transition scope's root element so that elements are only snapshotted and view transition animations applied inside the transition scope. |
There was a problem hiding this comment.
Setting view-transition-scope: all manually on a descendant element prior to starting a view-transition enables a running a view transition on the descendant concurrently without incurring a name collision.
An example can be found in
https://developer.chrome.com/docs/css-ui/view-transitions/element-scoped-view-transitions
There was a problem hiding this comment.
As mentioned over email, I have now added better content here. Let me know what you think.
kevers-google
left a comment
kevers-google
left a comment
There was a problem hiding this comment.
Overall, it looks good. A few suggested wording changes.
chrisdavidmills
changed the title
Excellent, thanks for your review, @kevers-google. I'll move this to the editorial review stage now, but feel free to jump in if you notice anything else that needs attention. |
3 participants
Description
Chrome 147 adds support for element-scoped view transitions; see https://chromestatus.com/feature/5109852273377280. This PR documents this new feature.
Specifically, it adds:
Element.startViewTransition()ref pageElement.activeViewTransitionref pageViewTransition.transitionRootref pageview-transition-scoperef pageMotivation
Additional details
Related issues and pull requests