Gataby リンク トランジションについて (メモ)

gatsby において、ページ遷移をする設定の仕方についてです.

詳しいことは、公式ページにて載っています.

簡単なフェードトランジションです.

Layout.js

import { TransitionState } from "gatsby-plugin-transition-link"
import posed from 'react-pose'

export const Fade = posed.div({
    hidden: { opacity: 0 },
    visible: { opacity: 1 },
  })

  <TransitionState>
                { ({mount}) => {

                return(
                <Fade
                    pose={
                        mount
                        ? 'visible'
                        : 'hidden'
                    }>
                     <main>{children} </main>
                </Fade>
                )} }
           </TransitionState>

こちらによると、mountという値が、遷移ページペアのマウント状態を表すようです.

気になったのは length というオプションです.

exit={{
  length: 2
}}
entry={{
  length: 1
}}

こちらの
length option によると、遷移したあとにトランジションリンクを押しても遷移しない時間の長さです.
遷移した後にアニメーションなどがかかる場合に有効かと思われます.

以上、参考になればなと思います !!