startViewTransition没效果是因为浏览器不支持、未在用户手势中调用或回调未返回Promise；需在click等事件中调用，将DOM更新和异步操作封装进回调并返回Promise，且过渡元素需有严格匹配的view-transition-name。
startViewTransition 为什么没效果？
直接调用 document.startViewTransition() 却看不到过渡动画，大概率是因为：浏览器不支持、没在用户手势触发的上下文中执行、或传入的回调没返回一个 Promise。View Transitions 是渐进增强特性，必须满足「用户交互 + 渲染更新」两个条件才能激活。
- 仅 Chromium 111+（Chrome/Edge/Opera）和 Safari 17.4+ 原生支持，Firefox 尚未实现
- 必须在
click、keydown等用户手势事件处理函数中调用，不能在setTimeout或fetch.then里直接用 -
startViewTransition()接收一个函数，该函数必须返回 Promise（通常是更新 DOM 后的Promise.resolve()）
如何正确包装 DOM 更新逻辑
View Transition 不是 CSS 动画开关，它依赖浏览器自动捕获「旧视图快照」和「新视图渲染完成」两个时机。所以你要把状态变更、DOM 操作、数据加载全部塞进传给 startViewTransition() 的回调里，并确保最终返回 Promise。
- 错误写法：
button.addEventListener('click', () => { data = newData; el.textContent = data; document.startViewTransition(() => {}); })—— DOM 已提前更新，过渡无从捕获 - 正确写法：把所有更新逻辑放进回调，例如
document.startViewTransition(() => { data = newData; el.textContent = data; return Promise.resolve(); }) - 如果涉及异步加载（如
fetch），需 await 后再更新 DOM，再 resolve：return fetch('/item').then(r => r.json()).then(d => { el.innerHTML = render(d); })
过渡样式怎么自定义？
浏览器默认会给参与 transition 的元素加上 view-transition-name 对应的伪元素（如 ::view-transition-old(my-title)），但前提是这些元素在旧/新 DOM 中都存在且 name 匹配。否则只能靠全局 ::view-transition-group 或 ::view-transition-image-* 控制。
- 给要过渡的元素显式添加
style="view-transition-name: my-header"，新旧页面中 name 必须完全一致 - 在 CSS 中用
::view-transition-old(my-header)控制旧状态样式（比如缩放、透明度），用::view-transition-new(my-header)控制新状态入场效果 - 避免给整个
<body>设 name —— 它不会被自动捕获为可过渡元素，浏览器只追踪有明确view-transition-name的节点
常见报错和静默失败场景
Failed to execute 'startViewTransition' on 'Document': Must be called in a user gesture handler. 这类错误说明调用栈脱离了用户交互上下文；而完全没有报错却没动画，往往是元素 name 不匹配或 DOM 更新发生在 transition 外部。
立即学习“前端免费学习笔记（深入）”；
- 使用 React/Vue 时，不要在 useEffect 或 watch 回调里调用
startViewTransition—— 它们不是用户手势直接触发的 - SPA 路由切换中，需确保
startViewTransition在导航事件（如router.push().then(...)）的回调中，且 DOM 更新由你手动控制（而非框架自动批量更新） - 调试技巧：在回调开头加
console.log('in transition')，确认是否进入；再检查 DevTools 的 Elements 面板里是否有view-transition相关伪元素生成
实际用起来最易忽略的是「name 匹配必须严格」和「更新必须锁在回调内」——少一个字母、多一次外部赋值，transition 就退化成普通跳转。
