2020 年 06 月 15 日

缘起

在Gatsby 中我们想加入路由过渡动画,不能像React那样,直接给路由封装高阶组件

我们可以 使用 Layout 布局组件来实现

他的原理就是在所有静态页面中套一个 你的 Layout 组件

🚀 👇

  • npm install --save gatsby-plugin-layout

  • 创建src/Layouts/index.html 这是默认位置 你还可以修改位置 详情参考Github

  • gatsby-config.js中添加插件

module.exports = {
  plugins: ["gatsby-plugin-layout"]
};
  • 安装 yarn add gatsby-plugin-transitions gatsby-plugin-layout react-spring

  • Layout 配置

import React from "react";
import { TransitionProvider, TransitionViews } from "gatsby-plugin-transitions";


const Layout = ({ location, children }) => {
  return (
    <TransitionProvider
      location={location}
      mode="immediate"
      // 进入
      enter={{
        opacity: 1,
        transform: "translate3d(50vh,0vh,0) scale3d(1, 1, 1) rotate(0deg)",
        config: {
            duration: 700
          }
      }}
      // 正常
      usual={{
        opacity: 1,
        transform: "translate3d(0vh,0vh,0) scale3d(1, 1, 1) rotate(0deg)"
      }}
      // 切出
      leave={{
        opacity: 0,
        transform: "translate3d(0vh,0vh,0vh) scale3d(0.5, 0.5, 0.5) rotate(0deg)",
        config: {
            duration: 1000
          }
      }}
    >
      <TransitionViews>
        {children}
      </TransitionViews>
    </TransitionProvider>
  );
};

export default Layout;


关注本站 RSS
© 2024, 滇ICP备19003866号
本网站版权归本站作者Ruoduan所有
原创文章遵循CC BY-SA 4.0授权许可,转载请注明出处