Question

我试图在我的gatsby网站中使用gatsby-plugin-transition-link，以实现页面转换。我设法很好地安装了软件包，并正确地实现了AniLink。过渡在我的沙箱中几乎可以正常运行，但是我遇到了一个有趣的错误。

我正在尝试实现封面过渡，即彩色div在页面上滑动，从而完全覆盖了它。继续在页面上滑动直到看不见，在其后面显示一个新的活动页面。

问题是：即使封面滑出了视线，初始页面仍会保留一秒钟。消失之前，它会与新活动页面重叠一秒钟。为什么会发生这种情况，以及如何确保在新的活动页面显示之前，先前的活动页面已隐藏？

这是我的沙盒的链接：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;
  }
}

Demo

Answer 2

我也遇到这个问题，但是仅当将AniLink与direction="left"或direction="right" direction =“ down”一起使用时，才显示此问题。

gatsby-plugin-transition-link AniLink封面选项无法足够快地隐藏上一页

2 个答案: