共享元素过渡

我刚 希望有更好的原生页面过渡，Bramus 评论 说 Chrome 正在开发一些东西。看起来他们对此很感兴趣，因为有一个 全新的仓库，而且您可以在 Chrome Canary 中直接测试它。

您想在不将网站变成 SPA 的情况下为网站添加导航过渡吗？那么请点赞此问题：https://#/iEv7lV5u27

— Jake Archibald (@jaffathecake) 2021 年 4 月 26 日

该仓库已移至 这里，我非常喜欢这个名称。“共享元素”在这里非常关键。它不仅是像滑出、滑入或 星形擦除 这样的动画，而是能够将单个元素移动到新位置。Shawn 指出，Sarah 的文章使这项功能非常清晰

🔥 我从很多人那里听到了很多关于想要在网络上创建原生动画的意见，所以我写了一篇关于如何实现它们的文稿并提供了一些演示！使用 @vuejs 和 @nuxt_js 制作！期待看到大家制作的东西！

📝 文章：https://#/K0Q3JtR0hD
🚀 演示：https://#/kBaaGm580Q pic.twitter.com/YXy756E6rg

— Sarah Drasner (@sarah_edo) 2018 年 4 月 23 日

我会将当前自述文件的代码片段放在这里，因为它真的很酷

function handleTransition() {
  document.documentTransition.prepare({
    rootTransition: "reveal-left",
    duration: 300,
    sharedElements: [e1, e2, e3]
  }).then(() => {
    doCustomThings();
    document.documentTransition.start({ sharedElements: [newE1, newE2, newE3] }).then(
      () => console.log("transition finished"));
  });
}

您不必拥有 sharedElements，但您可以使用它们，目前它们都需要使用 CSS 对其应用 contain: paint 才能工作。请注意，您不必处理更新 URL 或其他任何操作，因为这些操作会自动发生（我想？），因为这不需要单页面应用程序架构才能工作。

奇怪的历史

当我正在聊天的时候，Alex Riviere 指出，Chromium 之前的 Edge 拥有（专有的）页面过渡

<meta http-equiv="Page-Enter"
      content="RevealTrans(Duration=0.600, Transition=6)">

Whaaaat。Christian Schaefer 有 一篇哀叹我们失去 Trident 时失去的东西的文章

顾名思义，这样的过滤器会在导航时让用户从页面平滑过渡到页面，而不是像我们现在习惯的那样突然出现页面。您可以通过引用编号来选择大量的过渡过滤器

向上擦除、向下擦除、随机溶解、水平拆分，等等。但没有星形擦除，太不可思议了。当然也没有“共享元素过渡”