Re: [csswg-drafts] [css-view-transitions-2] Proposal for a view-transition-tree property (name tbd) (#10334)

I want to suggest an alternative approach to mismatch.
Consider the following: 
![BoxToBox](https://github.com/w3c/csswg-drafts/assets/88566/51fe0056-173a-443e-87ff-00c009f1ad10)

Let's say the yellow box had the blue box as the old parent group and the green box as the new parent group.
All of the proposed options would create an abrupt effect:
- If we use the old group, the yellow box would animate out of the blue box and then appear abruptly in the green box at the end of the animation.
- If we use the new group, the yellow box would disappear abruptly at the beginning of the animation and then would animate into the green box after a while.
- If we use the common ancestor, the yellow box would lose its clip abruptly, and then would gain it again (abruptly) at the end of the animation.

I think a potential solution here is to create two groups in this case, one with the exit animation, and one with the entry animation. Something to the effect of this:
```css
::view-transition-group(blue)
  ::view-transition-group(yellow)
    ::view-transition-image-pair(yellow)
      ::view-transition-old(yellow)
::view-transition-group(green)
  ::view-transition-group(yellow)
    ::view-transition-image-pair(yellow)
      ::view-transition-new(yellow)
```
This basically "separates" the old and the new snapshots. Note that the other options are already achievable (e.g. by setting the `view-transition-group` attribute to something other than `nearest` or some such) but perhaps splitting the group in this case is (a) a visual effect that's otherwise difficult to achieve. (b) the default expectation?

-- 
GitHub Notification of comment by noamr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10334#issuecomment-2222405031 using your GitHub account


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

Received on Thursday, 11 July 2024 09:03:04 UTC