使用:checked伪类时View Transition无法生效的解决方法

我实现了一个View Transition效果，原本通过手动切换.checked类来触发布局变化，但希望用CSS的:checked伪类替代冗余的类同步操作，却发现替换后View Transition不再生效。

问题原因 #

View Transition的核心逻辑是：调用startViewTransition后，浏览器先捕获当前页面快照，执行回调内的DOM/样式修改，再捕获新快照，最后生成过渡动画。如果回调内没有任何DOM状态变更，浏览器会判定前后状态一致，跳过过渡。

直接使用:checked时，复选框的状态会在input事件触发时自动变更，此时startViewTransition的回调没有任何操作，导致浏览器捕获的前后快照完全相同，过渡无法触发。

解决方案 #

通过在startViewTransition的回调内手动控制复选框的checked状态（同时阻止默认的状态变更），确保回调内存在明确的DOM修改，让浏览器能捕获到前后两个不同的状态快照。

修改后的代码

HTML

<div class="container">
  <label>
    <input type="checkbox" id="checkbox">
    Click here
  </label>
</div>

CSS

.container {
  display: grid;
  grid-template: 100px 100px / 100px 100px;
}

label {
  view-transition-name: foo;
}

/* 用:checked伪类替代.checked类 */
.container:has(:checked) {
  grid-column: 2;
  grid-row: 2;
}

JavaScript

const checkbox = document.getElementById('checkbox');

checkbox.oninput = (e) => {
  // 阻止默认的复选框状态变更，避免提前修改状态
  e.preventDefault();
  // 在View Transition回调内修改状态，触发前后快照捕获
  document.startViewTransition(() => {
    checkbox.checked = !checkbox.checked;
  });
};

这样既符合CSS写法规范，无需手动同步类状态，又能正常触发View Transition过渡效果。

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