最近色々なサイトを見て良い！と思ったのをメモるようにしている。
（メモ → manas-design-input ）
その中で『ページ遷移時のアニメーション、最近トレンドかも』と気づいた。
そういえばastroでそういう機能が実装された気がするので、やってみる。
公式Docは下記。
Docを見てあまりの記述の少なさに理解が追い付かなかったのだが、本当の本当に、『ページにビュートランジションを追加する』の項の2行を追加するだけで動く。私は前ページで利用しているlayout.astroのheadに追加した。
styleの位置変更を含んでるので差分が見づらいがこんな感じ
→ view transitionを追加 · thetalemon/manasandbox@1e85ec1 · GitHub
Beforeはこんな感じだった。ヘッダ以外の部分がぱっと変わる感じを確認してほしい。
Afterはこちら。おわかりいただけただろうか。
ヘッダ以外の部分がすこしふんわり変わるようになった。
これがたったの2行追加だけで実現されるなんて良い時代だなあと思う。
このアニメはデフォルトの『fade』というアニメーションである（ドキュメントのview transitionのページの『組み込みディレクティブ』の項に記載されている）。slideも試してみたが、slideを採用するなら『トップに戻る』はスライド方向を逆にしたい気持ちが湧いてしまったので、今回はデフォルトのfadeをそのまま採用した。アニメーションのカスタマイズも簡素ではあるが可能なので、『さっと消えてふわっと出る』とかもできるかもしれない。
カスタマイズ無しのfadeでもちょっと凝ってる感を演出できるので、2行だけだが追加してみるといいかもしれない。
話は変わるが、はてなブログではmp4をアップロードできないので、AdobeのGIFに変換ツールを使った。2つ目のファイルを変換するにはリロードをするしか手段がなさそうなシンプルなつくりだが、変換が早い上に変換後サイズも選べてネットにアップロードするのに向いているので紹介しておく。
