Использование Fade Prop на AniLink не рендеринг анимации - PullRequest
0 голосов
/ 10 ноября 2019

Я пытаюсь настроить анимацию на моем сайте Gatsby. Я могу заставить все анимации по умолчанию работать просто отлично, используя AniLink - кроме той, которую я хочу использовать! Swipe, cover и paintDrip работают на 100%, но когда я вставляю fade, он не работает.

Использование Gatsby 2.4.17

Я попытался установить gatsby-plugin-layoutчтобы увидеть, поможет ли это с анимацией. Я не мог заставить плагин макета работать должным образом. Я вернулся к более ранней фиксации, и через несколько часов я в растерянности. Я клонировал рабочий репозиторий, в котором используется AniLink fade, и он работает нормально, так что, думаю, в моем проекте что-то глючит. Это так странно, что все остальные анимации по умолчанию работоспособны.

Код заголовка:

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 добавит плавный переход к моей ссылке так же, как это сделали swipe, cover и paintDrip.

Фактический результат:

Нет сообщений об ошибках в консоли и новой странице, на которую указывает AniLinkto (to = "/") загружается правильно, но без анимации. Похоже, что это действительно может сломать ссылки в некоторых случайных испытаний. Если вы нажимаете вперед и назад слишком быстро, он отображает пустую страницу. Это было то, что заставило меня изначально думать, что я нуждаюсь в gatsby-plugin-layout. Но однажды я не смог заставить это работать должным образом ... Я заблудился.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...