为何transition-duration在该View Transition中不生效？技术求助

你的代码里过渡时长被系统忽略，核心是两个关键配置遗漏：

1. 样式更新时机错误 #

添加clicked_media_transition类（设置view-transition-name）后立即调用startViewTransition，浏览器还没来得及应用样式就捕获了旧状态快照，此时元素没有自定义过渡名称，只能使用默认过渡配置，你的自定义时长自然不生效。

修复方式：用requestAnimationFrame等待浏览器完成样式重绘后再启动过渡：

function onClick(e) {
  e.target.classList.add('clicked_media_transition');
  requestAnimationFrame(() => {
    document.startViewTransition(() => {
      e.target.classList.add('expand');
    });
  });
}

2. 过渡配置不完整 #

浏览器默认会给::view-transition-old和::view-transition-new伪元素设置独立动画，可能覆盖你在过渡组上设置的时长。需要显式禁用默认动画，让过渡组统一控制整个动画过程：

::view-transition-group(clicked_media_transition) {
  transition-duration: 5s;
  transition-timing-function: ease-out;
  transition-property: transform, opacity; /* 显式指定过渡属性 */
}

::view-transition-old(clicked_media_transition),
::view-transition-new(clicked_media_transition) {
  animation: none; /* 禁用默认动画 */
  opacity: 1;
}

修改后，自定义的5秒过渡时长即可正常生效。

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