gatsby-plugin-transition-link Параметр обложки AniLink недостаточно быстро скрывает предыдущую страницу

Question

Я пытаюсь использовать gatsby-plugin-transition-link на моем сайте gatsby, чтобы осуществить переход страницы. Мне удалось нормально установить пакеты и правильно внедрить AniLink. переход почти идеально работает в моей песочнице, но я получаю забавную ошибку.

Я пытаюсь реализовать переход на титульной странице, при котором цветной разделитель скользит по странице, полностью покрывая ее. Продолжая скользить по странице до тех пор, пока она не исчезнет, ​​за ней появится новая активная страница.

Проблема в том, что начальная страница остается на долю секунды, даже если обложка не открывается. Он перекрывает новую активную страницу на долю секунды, а затем исчезает. Почему это происходит, и как я могу убедиться, что ранее активная страница скрылась, прежде чем отобразится новая активная страница?

вот ссылка на мою песочницу: https://codesandbox.io/embed/m7z386ll6x нажмите на ссылку перехода на страницу 2 на странице индекса, чтобы увидеть ошибку в действии. Как только вы нажмете на ссылку, синяя обложка будет скользить по странице. Поскольку обложка выдвигается из поля зрения, все еще видят все текстовое содержимое со страницы индекса, перекрывающее новое содержимое страницы 2, в течение доли секунды.

Answer 1

У меня была такая же проблема сегодня, и я нашел хорошее решение.Поскольку во время перехода есть два элемента div, я просто добавил анимацию, чтобы скрыть размонтирование элемента div, когда он покрыт изображением.

Обратите внимание, что время анимации должно совпадать с продолжительностью + добавьте дополнительную задержку в анимации, чтобы избежать миганий.

.tl-wrapper--unmount {
  /*
    Just make sure animation time is same that transition duration in <AniLink />
    as well add some delay (e.g. 0.2s as in example) to avoid weird blinking at the end
  */
  animation: 1s ease-out 0.2s normal fadeout;
}
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    z-index: 0;
  }
  100% {
    opacity: 0;
    z-index: 0;
  }
}

Демо