モチベーション
ブログの遷移時にアニメーションを付けていたのだが、下記記事の「後日追記」の通り、モバイルでスタイル崩れが発生してしまっていたので、アニメーションを取っていた。やっぱり付けたかった。
GatsbyJSで作っているブログでページ遷移時にアニメーションが付くようにした
完成したもの
ページ遷移してもらえると、コンテンツが切り替わる際にフェードのアニメーションがかかっているのが確認できる。
やったこと
JSで頑張るアプローチを捨ててシンプルにCSSだけでアニメーションを付けたら上手くいった。もっと早くこちらのアプローチを試していれば良かった…
JSで頑張るアプローチが難しいのは、Gatsbyが遷移時にスクロール位置の調整をしていて、アニメーションに合わせてスクロール位置を調整する処理を遅延させたりしないといけない点で、なるべく余分なロジックを持ちたくないので、CSSで実現するのが良さそう。以前書いた記事で試していなかった実現方法として、ReactPoseを使う方法を試していたが、スクロール位置の調整処理の遅延とアニメーションのタイミングが合わなかったのと、 gatsby-browser.js に独自の実装が増えていって、アップデートが大変になりそうだったので、断念した。
ということで、追加したCSSは下記。
.wrapper
animation: fadeIn 0.5s ease 0s 1 normal
-webkit-animation: fadeIn 0.5s ease 0s 1 normal
@media only screen and (max-width: 620px)
margin: 0 16px
@keyframes fadeIn
0% { opacity: 0 }
100% { opacity: 1 }
@-webkit-keyframes fadeIn
0% { opacity: 0 }
100% { opacity: 1 }ちなみに、 layout.js は下記のようになっていて、ヘッダーはアニメーションしないようにしている。
import "modern-css-reset"
import "prismjs/plugins/line-numbers/prism-line-numbers.css"
import "prismjs/themes/prism-tomorrow.css"
import React from "react"
import Header from "../components/header"
import Seo from "../components/seo"
import "./global.module.sass"
import styles from "./layout.module.sass"
const Layout = ({ children }) => (
<>
<Seo />
<Header />
<div className={styles.wrapper}>{children}</div>
</>
)
export default Layout追加でやったこと
modern-css-reset をアップデートしたところ、遷移時にスクロールアニメーションが付くようになってしまっていた。html要素に scroll-behavior: smooth が付くようになったことが原因で、一部のブラウザで発生していた。上述の通り、Gatsbyは遷移時にスクロール位置の調整を行っているので、遷移する度にスクロールアニメーションが付いてしまっていた。非常に見づらかったので、scroll-behaviorを上書きした。
\:global
html
scroll-behavior: autoおわりに
ブログがいい感じになってきて、もっと色んな人に見てもらいたいからブログを書きたいというモチベーションが生まれてきた。
