水療中心，共享元素過渡和重新評估技術

諾蘭·勞森（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中文網其他相關文章！