スパ、共有要素の遷移、および再評価技術

ノーラン・ローソンは、シングルページアプリケーション（SPA）からの顕著なシフトについて説明したとき、いくつかの議論を引き起こしました。

Astro、Qwik、Elder.jsなどのヒップな新しいフレームワークは、「デフォルトでは0KB JavaScript」でMPA [マルチページアプリケーション]を宣伝しています。ブログの投稿では、スパS、フォーカス管理、スクロール修復、CMD/CTRLクリック、メモリリークなどのすべての課題をリストしています。

しかし、あまり議論されていないのは、MPAがスパに対してより優位になるために近年、コンテキストがどのように変化したかだと思います。

ノーランがスパが運命づけられていないことを明確にするためにフォローアップを公開したため、多くの人々がその最初の部分に本当にしがみついているようです。

[T]私の投稿の彼は、スパを埋め、彼らの墓で踊ることではありませんでした。スパは素晴らしいと思います。私は彼らの多くに取り組んできましたが、彼らは彼らの前に明るい未来を持っていると思います。私の主なポイントは、あなたがスパを使用している唯一の理由は、「ナビゲーションをより速くする」ために、それを再評価する時が来たかもしれません。

そして、彼がそれを言う正当な理由があります。実際、最初の記事は、共有要素の遷移で行われている作業を特に指摘しています。それらが前進する場合、ページの入り口にアニメーション/移行/サイジング/ポジショニング要素をアニメーション化/移行/配置するためのAPIがあります。 Jake Archibaldは、Google I/O 2022でどのように機能するかを示し、ビデオは宝石です。

あるページがどのように別のページに移行できるのか疑問に思っている場合、ブラウザは発信ページと着信ページのスクリーンショットを取得し、それらの間で移行します。したがって、1つのページが2つの画像を保持しているブラウザほど別のページになるのではなく、1つがアニメーション化され、もう1つの画像がアニメーション化されます。ジェイクは、舞台裏で起こっていることは、ページ画像を含む擬似要素からDOM構造が作成されることだと言います：

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

特定の要素を分離し、ページの残りの部分から別のアニメーションを適用する場合は、特定の要素を「スクリーンショット」できます。

 .site-header {
  Page-Transition-Tag：Site-Header;
  含まれる：ペイント;
}

そして、私たちはカスタム@keyframeアニメーションに接続して割り当てることができる擬似要素を取得します：

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

ダン、それは一体賢い！

また、HTML、CSS、およびJavaScriptがどれだけ進化し、改善し続けるかのプリンの証拠でもあります。ジェレミー・キースは、いくつかのテクノロジーの過去の判断を再評価する時期であることを示唆しています。

過去数年にわたって変更を知らなかった場合、単一ページアプリが実際にはもはや当てはまらないユニークな利点を提供していると考えるのは簡単です。 […]しかし、開発者は疑わしいままであり、ネイティブブラウザー機能よりもサードパーティのライブラリを信頼することを好みます。彼らは過去にそれらの図書館について決定しました。彼らは、過去にブラウザのサポートの状態を評価しました。彼らがそれらの決定を再評価することを望みます。

スパの材料は具体的に：

特に、特に近年、Webが飛躍的に登場したように感じます。サービスワーカー、ネイティブJavaScript API、CSSでできることの驚くべきブーストです。何よりも重要なことは、ブラウザ間の相互運用性がますます良くなっていることです。新しいWeb標準のユニバーサルサポートは、これまで以上に速いレートで到着します。

HTML、CSS、およびJavaScript：町で最高のカクテルです。たとえそれが追いつくのに1分かかりました。

以上がスパ、共有要素の遷移、および再評価技術の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。