demo · v140
contain vs normal
Two identical components rotated and flipped. Left column uses the default view-transition-group: normal — the inner snapshot escapes its parent for the duration. Right column uses contain — the inner stays put, animating inside the parent's pseudo subtree.
normal (default)
inner
inner promotes to root — escapes parent rotation
contain (new)
inner
inner stays inside parent's pseudo — clipped and rotated
.parent { view-transition-name: card; view-transition-group: contain; }
.child { view-transition-name: inner; /* trapped inside parent group */ }
see also
- Nested view-transition groups — feature index
- Three Deep — sibling concept