`::view-transition-image-pair()`伪元素的作用、疑问及实用示例咨询

1. 能否直接通过::view-transition-group()实现隔离？ #

规范里明确::view-transition-image-pair的作用是给它的子元素（::view-transition-old和::view-transition-new）提供isolation: isolate。虽然你可以直接给::view-transition-group设置isolation: isolate，让整个组内元素继承隔离效果，但两者作用域有明显区别：

• ::view-transition-image-pair的隔离精准作用于新旧视图图像对，只限定在这两个伪元素的混合操作上；
• 给::view-transition-group加隔离，会把范围扩大到整个组的所有内容（比如给group设置的背景、边框等样式也会被纳入隔离范围）。

从功能上看，直接给group加隔离能实现类似效果，但规范设计单独的image-pair伪元素，是为了更精准地控制隔离作用域，避免意外影响group层面的其他视觉样式。

2. “其他视觉输出”具体指什么？ #

这里的“其他视觉输出”指视图过渡元素之外的页面内容，以及过渡动画中不属于当前图像对的其他视觉元素，比如：

• 页面的背景色、静态文本/图片等非过渡元素；
• 页面中同时进行过渡的其他独立元素；
• 视图过渡组自身的额外样式（如边框、背景）。

隔离的核心作用就是把新旧视图的混合操作限制在image-pair容器内，防止混合模式（比如multiply、screen）影响到容器外的内容。

示例说明实用性 #

假设我们有以下场景：

• 页面背景为浅蓝（background: #cceeff）；
• 某元素需要做视图过渡，给新旧视图设置混合模式mix-blend-mode: multiply，旧视图为红色（background: #ff4444），新视图为黄色（background: #ffdd44）。

无隔离时：
新旧视图混合出的暗橙色会和页面浅蓝色再次混合，最终过渡效果变成偏蓝的暗橙色，完全偏离预期。

有image-pair隔离时：
新旧视图的混合仅在隔离容器内完成，生成的暗橙色不会和页面背景混合，过渡效果完全符合预期，页面背景也不受影响。

对应的简化CSS代码示例：

/* 开启视图过渡 */
::view-transition {
  animation-duration: 1s;
}

/* 给图像对设置混合模式 */
::view-transition-image-pair(my-element) {
  mix-blend-mode: multiply;
}

/* 旧视图样式 */
::view-transition-old(my-element) {
  background: #ff4444;
}

/* 新视图样式 */
::view-transition-new(my-element) {
  background: #ffdd44;
}

这个例子里，::view-transition-image-pair的隔离确保混合模式只作用于新旧视图之间，不会污染页面背景的浅蓝色。

内容的提问来源于stack exchange，提问作者Adrian