gatsby-plugin-transition-link AniLink Cover 选项没有足够快地隐藏上一页答案

【问题标题】：gatsby-plugin-transition-link AniLink Cover option not hiding previous page quick enoughgatsby-plugin-transition-link AniLink Cover 选项没有足够快地隐藏上一页
【发布时间】：2019-09-23 22:31:17
【问题描述】：

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

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

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

这是我的沙盒的链接：https://codesandbox.io/embed/m7z386ll6x 单击索引页面上的“转到第 2 页转换链接”，以查看正在运行的错误。单击链接后，蓝色封面会滑过页面。当封面滑出视图时，仍然可以看到索引页中的所有文本内容与第 2 页的新内容重叠，一瞬间。

【问题讨论】：

标签： reactjs transition gatsby

【解决方案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

【讨论】：

【解决方案2】：

我也遇到了这个问题，但只有在使用带有 direction="left" 或 direction="right" direction="down" 的 AniLink 时才没有显示这个问题。

【讨论】：