続・GatsbyJSで作っているブログでページ遷移時にアニメーションが付くようにした
モチベーションブログの遷移時にアニメーションを付けていたのだが、下記記事の「後日追記」の通り、モバイルでスタイル崩れが発生してしまっていたので、アニメーションを取っていた。やっぱり付けたかった。 GatsbyJSで作っているブログでページ遷移時にアニメーションが付くようにした 完成したもの ページ遷移してもらえると、コンテンツが切り替わる際にフェードのアニメーションがかかっているのが確認できる。 やったことJSで頑張るアプローチを捨ててシンプルにCSSだけでアニメーションを付けたら上手くいった。もっと早くこちらのアプローチを試していれば良かった… JSで頑張るアプローチが難しいのは、Gatsbyが遷移時にスクロール位置の調整をしていて、アニメーションに合わせてスクロール位置を調整する処理を遅延させたりしないといけない点で、なるべく余分なロジックを持ちたくないので、CSSで実現するのが良さそ
GatsbyJSで作っているブログでページ遷移時にアニメーションが付くようにした
モチベーションGatsbyJSでブログを作っており、SPAでページ遷移が爆速なのがとても良いが、読み込みがないことで、逆にフィードバックがなくてページが変わったことに気づけないので、ページ遷移時にアニメーションを付けたかった。 できあがったもの適当にページ遷移するとファンってなるのを体験できる。 ※ 後日追記下記 react-transition-group と gatsby-plugin-layout を使う方法でページ遷移時にアニメーションを付いたのだが、モバイル端末でスタイル崩れが発生したので、ページ遷移時のアニメーションは外した。 ※ さらに追記で、CSSで実現する方法が良さそうだったので、記事にした。 続・GatsbyJSで作っているブログでページ遷移時にアニメーションが付くようにした GatsbyJSのTransition事情gatsby-plugin-transition-l
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
