Question

我正在尝试在Gatsby网站上设置动画。使用AniLink，我可以使所有默认动画正常工作-除了我要使用的动画之外！滑动，覆盖和paintDrip具有100％的功能，但是当我插入淡入淡出时将无法正常工作。

使用盖茨比2.4.17

我尝试安装gatsby-plugin-layout，以查看这是否对动画有帮助。我最终无法使布局插件正常工作。我恢复为较早的提交，几个小时后我茫然不知所措。我克隆了一个使用AniLink淡入淡出的工作示例存储库，它可以正常工作，所以我猜我的项目有点麻烦。奇怪的是，所有其他默认动画都可以正常工作。

标题代码：

import AniLink from 'gatsby-plugin-transition-link/AniLink';

<div className={headerStyles.wordmark}>
    <AniLink fade to="/">
        <img alt="wordmark" src={data.contentfulWordmark.wordmark.file.url} />
    </AniLink>
</div>

Gatsby-config插件代码：

plugins: [
    'gatsby-plugin-transition-link',
    'gatsby-plugin-react-helmet',
    {
      resolve: 'gatsby-source-contentful',
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN
      }
    },
    'gatsby-plugin-sass',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'src',
        path: `${__dirname}/src/`
      }
    },
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          'gatsby-remark-relative-images',
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 750,
              linkImagesToOriginal: false
            }
          }
        ]

我希望AniLink可以像滑动，覆盖和paintDrip一样为链接添加淡入淡出过渡。

实际结果是：

控制台和AniLink指向（to =“ /”）的新页面中的错误消息均未正确加载，但没有动画。看起来它实际上可以在某些随机测试中断开链接。如果来回单击速度太快，它将呈现空白页面。这就是让我最初认为我需要gatsby-plugin-layout的原因。但是一旦我无法正常工作……我迷路了。

在AniLink上使用渐变道具不会渲染动画

0 个答案: