如何为不同DOM元素使用View Transition API实现缩略图转模态框过渡？

我有一个缩略图DOM元素，点击它后需要过渡到打开的模态框DOM元素（二者并非同一DOM元素），想用View Transition API实现这个效果。Chrome官方文档《Smooth and simple transitions with the View Transitions API》里提到过不同DOM元素过渡的内容，但我实现的缩略图转模态框过渡效果和预期不符，请问问题出在哪？

测试代码如下：

<!-- HTML -->
<div id="thumbnail">Click me</div>

<div id="modal">You have opened the modal<div id="closer">X</div></div>

<div id="comment">
pink outline = ::view-transition-old<br> green outline = ::view-transition-new"
</div>

/* CSS */
#thumbnail {
  position: relative;
  border: 2px solid darkred;
  display: inline-block;
  padding: 40px;
  cursor: pointer;
}

#thumbnail:hover {
  background-color: #74747444;
}

#modal {
  display: none;
  position: absolute;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  padding: 80px;
  border: 2px solid blue;
}

#closer {
  position: absolute;
  top: 4px;
  right: 4px;
  cursor: pointer;
}

::view-transition-old(modal),
::view-transition-new(modal) {
  animation-duration: 5s;
}

::view-transition-old(modal) {
  outline: 4px solid pink;
}

::view-transition-new(modal) {
  outline: 4px solid green;
  outline-offset: 4px;
}

// JavaScript
const thumbnail = document.querySelector("#thumbnail")

const modal = document.querySelector("#modal")

const closer = document.querySelector("#closer")

thumbnail.addEventListener("click", () => openModal())

closer.addEventListener("click", () => {
  modal.style.display = "none"
})

function openModal() {
  // Fallback for non-supporting browsers
  if (!document.startViewTransition) {
    modal.style.display = "block"
    return
  }
  
  thumbnail.style.viewTransitionName = "modal"
  modal.style.viewTransitionName = ""

  const transition = document.startViewTransition(() => {
    modal.style.display = "block"
  })
  
  transition.updateCallbackDone.then(() => {
    thumbnail.style.viewTransitionName = ""
    modal.style.viewTransitionName = "modal"
  })
  
  transition.finished.finally(() => {
    modal.style.viewTransitionName = ""
  })
}

你的核心错误是**viewTransitionName的赋值时机逻辑错误**。View Transition API实现跨元素过渡的核心规则是：

• 过渡启动前的旧状态：给要“消失”的元素（缩略图）设置唯一的viewTransitionName
• 过渡回调内的新状态：给要“出现”的元素（模态框）设置完全相同的viewTransitionName
• 这两个赋值必须在快照生成前完成，否则API无法关联两个元素的过渡

具体错误点 #

1. 你在过渡回调里只显示了模态框，没有给它设置viewTransitionName，反而等到updateCallbackDone（DOM更新完成，快照已经生成）才设置，这时候API已经无法把模态框和缩略图关联起来了
2. 过渡结束后清空模态框的viewTransitionName，不仅冗余，还会导致后续关闭模态框时无法实现反向过渡

修正后的代码 #

// 修正后的JavaScript
const thumbnail = document.querySelector("#thumbnail")
const modal = document.querySelector("#modal")
const closer = document.querySelector("#closer")

thumbnail.addEventListener("click", () => openModal())
closer.addEventListener("click", () => closeModal())

function openModal() {
  if (!document.startViewTransition) {
    modal.style.display = "block"
    return
  }

  // 旧状态：给缩略图设置过渡名称
  thumbnail.style.viewTransitionName = "modal"

  const transition = document.startViewTransition(() => {
    // 新状态：显示模态框并设置同名过渡名称
    modal.style.display = "block"
    modal.style.viewTransitionName = "modal"
  })

  // 过渡完成后，清空缩略图的过渡名称（避免干扰其他过渡）
  transition.finished.then(() => {
    thumbnail.style.viewTransitionName = ""
  })
}

// 可选：实现关闭模态框的反向过渡
function closeModal() {
  if (!document.startViewTransition) {
    modal.style.display = "none"
    return
  }

  // 旧状态：给模态框设置过渡名称
  modal.style.viewTransitionName = "modal"

  const transition = document.startViewTransition(() => {
    // 新状态：隐藏模态框，给缩略图设置同名过渡名称
    modal.style.display = "none"
    thumbnail.style.viewTransitionName = "modal"
  })

  transition.finished.then(() => {
    modal.style.viewTransitionName = ""
  })
}

修正说明 #

• 在过渡启动前给缩略图设viewTransitionName，标记旧状态的过渡元素
• 在过渡回调函数内（快照生成前），同时完成模态框显示和viewTransitionName赋值，让API能关联两个元素
• 过渡完成后只清空缩略图的过渡名称，保留模态框的（方便关闭时反向过渡）
• 新增了关闭模态框的反向过渡逻辑，让交互更完整

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