💻

続・GatsbyJSで作っているブログでページ遷移時にアニメーションが付くようにした

2020-09-08

モチベーション

ブログの遷移時にアニメーションを付けていたのだが、下記記事の「後日追記」の通り、モバイルでスタイル崩れが発生してしまっていたので、アニメーションを取っていた。やっぱり付けたかった。

GatsbyJSで作っているブログでページ遷移時にアニメーションが付くようにした

完成したもの

ページ遷移時にアニメーションが付いている

ページ遷移してもらえると、コンテンツが切り替わる際にフェードのアニメーションがかかっているのが確認できる。

やったこと

JSで頑張るアプローチを捨ててシンプルにCSSだけでアニメーションを付けたら上手くいった。もっと早くこちらのアプローチを試していれば良かった…

JSで頑張るアプローチが難しいのは、Gatsbyが遷移時にスクロール位置の調整をしていて、アニメーションに合わせてスクロール位置を調整する処理を遅延させたりしないといけない点で、なるべく余分なロジックを持ちたくないので、CSSで実現するのが良さそう。以前書いた記事で試していなかった実現方法として、ReactPoseを使う方法を試していたが、スクロール位置の調整処理の遅延とアニメーションのタイミングが合わなかったのと、 gatsby-browser.js に独自の実装が増えていって、アップデートが大変になりそうだったので、断念した。

ということで、追加したCSSは下記。

/src/components/layout.module.sass
.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 は下記のようになっていて、ヘッダーはアニメーションしないようにしている。

/src/components/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を上書きした。

/src/components/global.module.sass
\:global

  html
    scroll-behavior: auto

おわりに

ブログがいい感じになってきて、もっと色んな人に見てもらいたいからブログを書きたいというモチベーションが生まれてきた。

キクナントカ

ソフトウェアエンジニアをしています。Flutter、Rails、GatsbyJSを主に触っています。趣味でボードゲームを制作したり、個人開発したりしています。詳しくはこちら