::view-transition-old
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
::view-transition-old CSS 伪元素表示视图过渡的旧视图状态——即过渡前旧视图的静态屏幕截图。
在视图过渡期间，::view-transition-old 包含在相关的伪元素树上，如视图过渡过程中所述，前提是有一个旧视图状态需要表示。它只能是 ::view-transition-image-pair 的子节点，并且它不会有任何子节点。
它是一个可替换元素，因此可以使用 object-fit 和 object-position 等属性进行操作。它的自然尺寸等于内容的大小。
::view-transition-old 在 UA 样式表中具有以下默认样式：
css
@keyframes -ua-view-transition-fade-out { to { opacity: 0; } } html::view-transition-old(*) { position: absolute; inset-block-start: 0; inline-size: 100%; block-size: auto; animation-name: -ua-view-transition-fade-out; animation-duration: inherit; animation-fill-mode: inherit; } 语法
css
::view-transition-old(<pt-name-selector>) { /* ... */ } <pt-name-selector> 可以是以下任何值之一：
*-
使伪元素选择器匹配所有视图过渡组。
root-
使伪元素选择器匹配由 UA 创建的默认
root视图过渡组，该组用于包含整个页面的视图过渡，这意味着任何未通过view-transition-name属性分配给特定视图过渡组的元素。 <custom-ident>-
使伪元素选择器匹配（通过
view-transition-name属性将<custom-ident>分配给元素而创建的）特定视图转换组。
示例
css
figcaption { view-transition-name: figure-caption; } @keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes shrink-x { from { transform: scaleX(1); } to { transform: scaleX(0); } } ::view-transition-old(figure-caption), ::view-transition-new(figure-caption) { height: auto; right: 0; left: auto; transform-origin: right center; } ::view-transition-old(figure-caption) { animation: 0.25s linear both shrink-x; } ::view-transition-new(figure-caption) { animation: 0.25s 0.25s linear both grow-x; } 规范
| Specification |
|---|
| CSS View Transitions Module Level 1 # ::view-transition-old |
浏览器兼容性
Loading…