View Transitions 在 RTL-LTR 与国际化场景的过渡一致性

View Transitions 在 RTL-LTR 与国际化场景的过渡一致性概述国际化场景下，布局方向与断点差异会影响共享元素过渡与对齐。本文提供方向适配与样式治理，确保动画一致与信息可达。关键参数/概念- `direction: rtlltr` 与语言标记影响布局与对齐。共享元素命名在不同语言版本需保持一致与可匹配。降级路径遵循 `prefers-reduced-motion` 与键盘可达性要求。实践/示例html[dir="rtl"] .nav { direction: rtl } .logo { view-transition-name: site-logo } ::view-transition-old(site-logo), ::view-transition-new(site-logo) { animation: fade 160ms ease } @keyframes fade { from { opacity: 0 } to { opacity: 1 } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(site-logo), ::view-transition-new(site-logo) { animation: none } } function withTransition(run) { const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches if (reduce || !document.startViewTransition) { run(); return } document.startViewTransition(() => run()) } 验证方法方向一致：在 RTL/LTR 两种方向下检查共享元素位置与过渡方向。多语言：切换语言资源与文本长度，确保断点与换行不破坏过渡。可访问性：读屏与键盘导航在不同方向下保持路径一致。注意事项方向性样式与命名保持统一与隔离，避免局部覆盖导致错位。文本换行与排版差异需在两端页面保持可匹配结构。降级路径在不同语言下同样可用与清晰。参考资料MDN: ViewTransition 与 `startViewTransition()`https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransitionhttps://developer.mozilla.org/en-US/docs/Web/API/ViewTransitionMDN: CSS Writing Modes 与方向性（参考）https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode