水疗中心，共享元素过渡和重新评估技术

诺兰·劳森（Nolan Lawson）描述了从单页应用程序（SPA S）的明显转变时引发了一些讨论：

诸如Astro，Qwik和Elder.js之类的新框架正在用“默认情况下的0KB JavaScript”吹捧其MPA [多页应用程序]。博客文章正在列出水疗中心的所有挑战：历史记录，焦点管理，滚动修复，CMD/CTRL单击，内存泄漏等。

但是，我认为所讨论的内容较少的是，近年来的背景如何变化，使MPA对SPA的影响更大。

似乎有很多人真的紧紧抓住了第一部分，因为诺兰（Nolan）发表了一项后续措施，以澄清水疗中心远非注定：

我的帖子的角度不是埋葬水疗中心并在他们的坟墓上跳舞。我认为水疗中心很棒，我已经为其中的许多工作做了工作，我认为他们的前景光明。我的要点是：如果您使用水疗中心的唯一原因是“它使导航更快”，那么也许是时候重新评估它了。

他这么说是充分的理由。实际上，第一篇文章专门指出了对共享元素过渡的工作。如果他们向前迈进，我们将拥有一个API，用于在页面入口上进行动画/过渡/大小/定位元素进行动画/大小/定位元素。杰克·阿奇博尔德（Jake Archibald）展示了它在Google I/O 2022上的工作方式，视频是宝石。

如果您想知道一个页面如何过渡到另一个页面，则浏览器将对传出页面和传入页面进行屏幕截图，然后在这些页面之间进行过渡。因此，它并不是一页成为另一页，而是浏览器握在两个图像上，因此它可以使一个图像动画，而另一个则可以动画动画。杰克说，场景背后发生的事情是由包含页面图像的伪元素创建的DOM结构：

 <transition-container>
  <image-wrapper>
    
    
  >
></image-wrapper></transition-container>

如果要隔离并应用页面其余部分的其他动画，我们可以“屏幕截图”特定元素：

 .Site-Header {
  页面转换标签：站点头；
  包含：油漆；
}

我们可以获得可以连接并分配Custom @keyframe动画的伪元素：

 
<transition-container>
  
  <image-wrapper>
    
    
    
    
  >
></image-wrapper></transition-container>

dang，那真是聪明！

布丁也证明了HTML，CSS和JavaScript多少继续发展和改进。如此之多，以至于杰里米·基思（Jeremy Keith）建议现在是时候重新评估过去对某些技术的判断了：

如果您在过去几年中不知道变化，那么仍然可以很容易地认为单页应用程序提供了一些独特的优势，而实际上不再实现。 […]但是，开发人员仍然可疑，仍然宁愿信任本机浏览器功能的第三方库。他们过去就这些图书馆做出了决定。他们过去评估了浏览器支持状态。我希望他们能重新评估这些决定。

SPA的成分专门：

近年来，尤其是感觉到网络已经突飞猛进：服务人员，本地JavaScript API，以及您可以使用CSS的惊人提升。最重要的是，浏览器之间的互操作性越来越好。对新网络标准的普遍支持的速度比以往任何时候都更快。

HTML，CSS和JavaScript：它仍然是镇上最好的鸡尾酒。即使需要一分钟才能赶上它。

以上是水疗中心，共享元素过渡和重新评估技术的详细内容。更多信息请关注PHP中文网其他相关文章！