[css-view-transitions-2] Optimize no content change animations #9406
Description
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:
- The user clicks a playing video which then animates to a different spot. Details here.
- 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.