アニメーションのページの遷移と

10769 ワード
astro テキストリンク
私は、彼らがどれくらい正確にそれをしたかについて理解しようとしている午後を燃やすために最高のノッチアニメーションで美しく設計されたウェブサイトに出くわした唯一の開発者でありえません.通常、答えは5つの異なるライブラリとJavaScriptとCSSの山の組み合わせは、ワイヤーを介して送信されます.
アニメーションは、すべてまたは何もする必要はありません、それは本当に小さく起動し、ゆっくりと成長し、ユーザーエクスペリエンスを磨くために最善にすることができます.Swup 優れた出発点は、ページ遷移アニメーションでクライアント側のルーティングをフックする必要があるすべての基本を提供しています.さらに良い、SWUPのAPIサポートplugins ダース以上の中古で最も一般的なユースケースと独自のカスタムプラグインをロールバックする簡単なAPIのプラグインを作った.
TLドクターページ遷移アニメーションの追加Astro's blog-multiple-authors 例は驚くほど単純だった.チェックアウトsource code here または右にジャンプlive demo !

プロジェクトの設定
私たちは既存のアストロスターターから始めているので、ここではほとんどセットアップがありません.まず、使いましょうdegit ブログ例のローカルコピーを作成するには
npx degit snowpackjs/astro/examples/blog-multiple-authors demo-astro-swup

SWUPのプレッピングjs
大きな医者がいるswup's site それで、私は雑草であまり得ることができません、しかし、ルーティングが働く方法の基本的な考えを持つ価値があります.
訪問者があなたのサイトのリンクをクリックすると、SWUPはその要求をハイジャックし、バックグラウンドで次のページを読み込むことを試みます.デフォルトでは、SWUPはID#swup すべてのページ(これは設定可能です).新しいページに移動すると、SWUPはバックグラウンドで新しいコンテンツを読み込み、#swup 新しいページのコンテンツの要素.
ナビゲーション中に、CSSクラスis-animating and is-leaving は、実際の遷移アニメーションをトリガするフックを与える追加されます.
それがそうであるならば、彼らがすべてAstroプロジェクトで共有レイアウト構成要素を使用しているならば、あなたのサイトのすべてのページにSWUPを加えるのは少し簡単です.参照this commit あなたが好奇心旺盛であるならば、私がこのプロジェクトで一般的なレイアウト構成要素をつくるために、私が動き回ったもの.
最も重要なのはsrc/layouts/Main.astro
<main id="swup" class="wrapper">
  <slot />
</main>
これは#swup 要素はすべてのページにあり、ページナビゲーション中に置き換えられるすべてのページ固有のコンテンツをラップします.

SWUPの追加js
SWUPは非常に設定可能ですが、1つのNPMの依存性とコードのカップル行は本当にそれが開始するために必要なすべてです.
npm install --save-dev swup
SWUPを初期化する/public/app.js ...
import Swup from "swup";

const swup = new Swup();
最後に、インポートapp.js 共有レイアウトで.
<html>
  <body>
    ...
    <script type="module" src="/app.js"></script>
  </body>
</html>

遷移アニメーションの追加
ので、実際には何もまだアニメーション化されません.チェックアウトtheme docs あなた自身のCSSアニメーションを書きたいならば、彼らはNPMでいくつかの基本的なテーマを含みます.我々は、今のところ、あなたが行動の中で見ることができる基本的なスライドテーマに固執するでしょうlive demo .
npm install --save-dev @swup/slide-theme

import Swup from "swup";
import SwupSlideTheme from "@swup/slide-theme";

const swup = new Swup({
  plugins: [new SwupSlideTheme()],
});

サポートスコープスタイル
アストロサポートscoped styles 箱から.これは、パフォーマンスのための巨大な勝利であり、ブラウザで不要なCSSを回避することができますが、新しいページに移動するときにリンクされたスタイルシートを更新するためにSWUPを必要とします.

This is actually a problem I ran into with barba.js. I couldn't for the life of me figure out how to update the page's <head> when navigating. It seems like this may have been possible in v1 but is no longer supported in v2.


ありがたいことに、スワップはこれを彼らのhead plugin .
npm install --save-dev @swup/head-plugin

import Swup from "swup";
import SwupHeadPlugin from "@swup/head-plugin";
import SwupSlideTheme from "@swup/slide-theme";

const swup = new Swup({
  plugins: [new SwupHeadPlugin(), new SwupSlideTheme()],
});
再び救助へのプラグイン!このプラグインは古い<head> 新しいページのバージョンをナビゲートするときconfig options すべてのページにいくつかのスタイルやメタタグを保持する必要があります!

アクセシビリティサポート
ページ遷移は本当に画面リーダーのようなアクセシビリティツールを使用してサイトを訪問して誰のための経験を台無しにすることができます.多くのアクセシビリティツールは、ブラウザのイベントによってページの内容が変更されたときに知ることができます.SWUPは手動でDOMコンテンツを変更することで、読者は何も変更されたことを認識しないかもしれません.
再び、このアクセシビリティ問題の世話をする便利なプラグインがあります.それは魔法の弾丸ではない、私は強くあなたが手動で画面リーダーを使用してサイトのすべてをテストすることをお勧め-何か他の場合、それは視覚的に障害されている場合は、Webを使用する方法を参照してくださいすることを啓発している!
npm install --save-dev @swup/a11y-plugin

import Swup from "swup";
import SwupA11yPlugin from "@swup/a11y-plugin";
import SwupHeadPlugin from "@swup/head-plugin";
import SwupSlideTheme from "@swup/slide-theme";

const swup = new Swup({
  plugins: [new SwupA11yPlugin(), new SwupHeadPlugin(), new SwupSlideTheme()],
});

漸進的に、無料で強化!
見てみようProgressively enhancing Svelte with JavaScript 進歩的な強化がなぜ重要であるかについてのより詳細な説明のためにポストするが、それは、サイトがJavaScriptを使用するのを決して必要としないと言うのを十分とします.
SWUP遷移の場合、JavaScriptが失敗したり、何らかの理由で無効になっている場合は、通常のような新しいページに移動できる完全に機能する静的サイトを持っています.スワップあなたのリンクを変更しないか<a> ビルド時のタグapp.js 決してロードしたり、最初の場所に建てられた正確に同じ静的なサイトで残っている例外をヒット!

結論と次のステップ
あなたが本当にアニメーションで夢中になるためにここですることができるより多くの多くがあります.プルインgsap 複雑なアニメーションのタイムラインを作成したり、SVGに遷移アニメーションを追加します.私はまだそれを試していないが、私はあなたのページのさまざまな部分をターゲットにスワップの複数のインスタンスを持つことができなかった理由を参照してください.
それがあなたのものであるならば、我々について来てください、そして、あなたがあなた自身のサイトのために来るアニメーションを共有するために手を伸ばしてください!
[React/Redux] redux-saga
2022.02.23 TIL