为什么这个 React/ReactRouter/CSS 转换有时只起作用答案

【问题标题】：Why does this React/ReactRouter/CSS Transition only work sometimes为什么这个 React/ReactRouter/CSS 转换有时只起作用
【发布时间】：2020-11-28 15:46:45
【问题描述】：

我正在尝试在两条路线之间创建过渡。我的 CSS 过渡似乎并非每次都有效，只是偶尔有效。我发现这篇帖子React css transition does not work correctly 谈到了动画被切断，但我真的不明白这是否适用于我。

这是该问题的代码笔。目前，过渡很少进行。我试图让它在您每次单击链接时运行。

https://codepen.io/rhigdon-the-vuer/pen/jOqEdWO

  <div>Code a bit too complex to post here. Let me know if it would be helpful.</div>

我目前的理论是重新渲染取消过渡。

更新：我最终使用了 cmets 中建议的动画 css 属性。这似乎工作得更好。它现在可以可靠地播放动画了。

这是更新后的笔： https://codepen.io/rhigdon-the-vuer/pen/mdPJBGv?editors=0110

【问题讨论】：

github.com/monzoor/ayouth/blob/master/website/src/Components/… 检查此代码可能会对您有所帮助。用动画包裹你的子组件，它会起作用。
如果你为了测试而经常点击，它不会一直有效。过渡需要 1 秒，因此如果您需要测试它，例如将其减少到 0.2 秒，它会起作用（至少更多次，具体取决于您单击它的速度）
@rhigdon 请检查我的回答
当我访问您的代码框时，我实际上得到了一个错误。我理解你的回答，并会尝试一下。要去投票，但在我接受作为我正在寻找的实际答案之前想更多地考虑一下。这些 cmets 绝对是很好的解决方法，但我对为什么过渡 CSS 属性会这样做有点感兴趣。
hmm 刚刚又保存了一次（虽然它没有显示未保存的文件）。现在它应该可以工作了。

标签： css reactjs react-router

【解决方案1】：

我不知道这是否对您有帮助，但我更改了您的代码以使用 refs 和纯 css 值设置，它似乎可以正常工作。

检查此沙盒

https://codesandbox.io/s/jolly-bush-mhtby

棘手的部分

if (divEl && divEl.current.style.width === "100%") {
  setTimeout(function () {
    divEl.current.style.width = "0%";
  }, 5);
}

您需要为浏览器设置一个最小超时，以了解需要进行转换。我尝试“快速”单击链接，但没有一次没有出现过渡。

【讨论】：