添加 view-transition-name 属性时视图转换不起作用

Question

我目前正在 React 中开发一个项目，但在视图转换方面遇到了一些问题。我遇到问题的具体属性是 view-transition-name。

当我没有将 view-transition-name 属性分配给任何元素时，它们会按预期交叉淡入淡出。然而，当我将视图转换名称分配给两个页面上的同一元素时，事情开始变得奇怪。该元素不是平滑过渡，而是突然出现在新状态 - 就好像根本没有应用过渡一样。

当我将 view-transition-name 属性应用于仅一个页面上的同一元素时，它只会以一种方式进行转换。例如，如果我从页面 A（具有该属性）导航到页面 B（不具有该属性），过渡会起作用，但不流畅，只是默认的交叉淡入淡出。但是，如果我从页面 B 导航到页面 A，则不会发生转换 - 再次，该元素突然出现，就好像我没有在任何地方添加视图转换名称一样。

我尝试过在线寻找解决方案，但没有找到任何似乎可以解决此特定问题的内容。任何有关可能导致此问题的原因以及如何解决该问题的见解将不胜感激。

以下是codesandbox示例的链接： https://codesandbox.io/s/vibrant-tree-tq9ttc

Answer 1

当您

flushSync

导航状态发生变化时，它会起作用，因为

document.startViewTransition

需要同步 DOM 修改来创建可以转换的差异。

查看修改后的示例，其中所述修复工作正常：https://codesandbox.io/s/silly-browser-qj9gyx?file=/src/page2.jsx

编辑：当然要归功于https://malcolmkee.com/blog/view-transition-api-in-react-app/，我是从他那里学到这一点的。

Answer 2

确保在特定时间点同一页面上不超过一项具有相同视图转换名称的项目。 这是我的问题