今天就开始在您的网站上实现视图过渡

The View Transition API allows us to animate between two states with relative ease. I say relative ease, but view transitions can get quite complicated fast.

视图过渡 API 使我们能够相对轻松地在两个状态之间进行动画。我说相对轻松，但视图过渡可能会变得相当复杂快速。

A view transition can be called in two ways; if you add a tiny bit of CSS, a view transition is initiated on every page change, or you can initiate it manually with JavaScript.

视图过渡可以通过两种方式调用；如果您添加一点 CSS，则在每次页面更改时会启动视图过渡，或者您可以通过 JavaScript 手动启动它。

@view-transition { navigation: auto; }

if (document.startViewTransition()) { document.startViewTransition(() => { filterItems() }) } else { filterItems() }

When a view transition is initiated it creates two snapshots; one of the current state, and one the future state. The view transition then compares the position, sizing and rotation of the two snapshots and, finally creates a keyframe animation. It’s pretty much how the FLIP animation technique works, but CSS does all the heavy lifting, even if JavaScript initiates the view transition.

当视图转换被启动时，它会创建两个快照；一个是当前状态，另一个是未来状态。视图转换然后比较这两个快照的位置、大小和旋转，最后创建一个关键帧动画。这几乎就是 FLIP 动画技术的工作原理，但即使是 JavaScript 启动视图转换，CSS 也完成了所有繁重的工作。

Those snapshots end up in a view transition pseudo element, and by default only a snapshot of the root (HTML) element is created, but you can add more items to the pseudo element by adding view-transition-names to elements.

这些快照最终会出现在视图转换伪元素中，默认情况下只会创建根（HTML）元素的快照，但您可以通过将 view-transition-name 添加到元素来向伪元素添加更多项目。

Anatomy of a view transition

视图过渡的结构

::view-transition ::view-transition-group(root) ::view-transition-image-pair(root) ::view-transition-old(root) ::view-transition-new(root)

Every named view transition gets its own group. Every group has a view-transition-image-pair and a view-transition-old and/or...