时间戳

首页 > 解决方案 > gatsby-plugin-transition-link AniLink 无法构建

reactjs - gatsby-plugin-transition-link AniLink 无法构建

问题描述

我的 AniLink 转换在我的本地机器上使用gatsby develop和gatsby serve 运行良好。但是使用gatsby build并放在我的服务器上，我只会得到一个没有动画的页面更改。

单击滑块中的图像应该有过渡油漆滴落，但它只会改变页面。

这是一个测试站点http://www.lukedohner.com/bootstrap-ld/react-site/public/

我需要做些什么来为 gatsby 构建引入这个吗？

AniLink from "gatsby-plugin-transition-link/AniLink"

/滑块组件

<AniLink className={`swipermy-slide-link-ani`}  paintDrip to="/redemption" duration={1} hex="#ffffff"></AniLink>

/gatsby-config.js

    plugins: [

        `gatsby-plugin-react-helmet`,
        {
          resolve: `gatsby-source-filesystem`,
          options: {
            name: `images`,
            path: `${__dirname}/src/images`,
          },
        },
        `gatsby-plugin-transition-link`,

        `gatsby-transformer-sharp`,
        `gatsby-plugin-sharp`,
        {
          resolve: `gatsby-plugin-manifest`,
          options: {
            name: `gatsby-starter-default`,
            short_name: `starter`,
            start_url: `/`,
            background_color: `#663399`,
            theme_color: `#663399`,
            display: `minimal-ui`,
            icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
          },
        },


        // this (optional) plugin enables Progressive Web App + Offline functionality
        // To learn more, visit: https://gatsby.app/offline
        // 'gatsby-plugin-offline',
      ],

标签： reactjsgatsby

解决方案

我有类似的东西，它只在某些页面上工作。问题出在特定页面 json 404ing 上。

检查您的控制台，如果页面上有任何错误，它可能会阻止处理转换的 js 运行

推荐阅读