Я пытаюсь настроить анимацию на моем сайте 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. Но однажды я не смог заставить это работать должным образом ... Я заблудился.