[csswg-drafts] [css-view-transitions-2] Optimize no content change animations (#9406)

khushalsagar has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-view-transitions-2] Optimize no content change animations ==
There are a couple of patterns where an element's position from the old state needs to be retained and animated but not its content. For example:

1. The user clicks a playing video which then animates to a different spot. Details [here](https://developer.chrome.com/docs/web-platform/view-transitions/#transitioning-without-freezing).
2. There is a list of items where the list is re-sorted.

The cross-fade animation for these cases is an unnecessary perf hit: both because we captured pixels which weren't needed and then ran an animation using them. In case 1, the developer explicitly adds CSS to not display the old pixels. But the browser still has to do the work to capture and retain them until the transition ends.

A better way to do this would be a native API for the author to explicitly tell the browser that the content doesn't need to be animated. So instead of doing a cross-fade, just show the new content directly. Perhaps a new CSS property or addition to the existing `view-transition-name` like `view-transition-name: target no-content-animation`. If the developer says "no-content-animation", everything else works the same except no old image is captured. The old element contents are still removed from its parent snapshot. The pseudo-DOM won't generate a `::view-transition-old` and there will be no fade-in animation on `::view-transition-new` but rest of the UA CSS is the same.

A few questions right now:
- I don't think there should be a size animation for such cases but I could be missing something.
- If we don't find the matching view-transition-name in the new DOM then that would be a bug. Since the moment the new DOM starts rendering, such elements will disappear. We could skip generating any pseudos for such names or abort the transition.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9406 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 25 September 2023 18:14:28 UTC