View Transition API问题：过渡时overflow属性被忽略

问题原因 #

View Transition API 在生成过渡动画时，会将带有 view-transition-name 的元素从原文档流中提取为独立快照。此时原父容器的 overflow 约束不会作用于这些快照，导致原本被隐藏的元素内容短暂暴露，动画结束后才恢复。

解决方案 #

方法1：给父容器添加无动画的过渡快照 #

给设置了 overflow 的父容器指定一个唯一的 view-transition-name，再通过 CSS 禁用该容器的过渡动画，确保其快照保留 overflow:hidden 属性，从而约束子元素快照的显示范围。

/* 原父容器样式 */
.overflow-container {
  overflow: hidden;
  view-transition-name: transition-container; /* 添加唯一名称 */
}

/* 禁用容器的过渡动画 */
::view-transition-old(transition-container),
::view-transition-new(transition-container) {
  animation: none;
  mix-blend-mode: normal; /* 消除默认混合效果干扰 */
}

/* 子元素原过渡样式保持不变 */
.target-element {
  view-transition-name: target-element;
}

方法2：给过渡元素自身添加裁剪 #

如果父容器的 overflow 仅用于约束当前过渡元素，可直接给元素自身设置 overflow:hidden，让元素的快照自带裁剪规则，无需依赖父容器的约束。

.target-element {
  view-transition-name: target-element;
  overflow: hidden; /* 自身裁剪超出内容 */
}

验证说明 #

以上两种方案在 Chrome 和 Edge 浏览器中测试均有效，可解决过渡期间隐藏内容短暂显示的问题。

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