reactjs - React onTransitionEnd 事件被频繁调用

Question

我有这样的 React 代码:

handleTransitionEnd() {
    console.log('ended');
}

<div onTransitionEnd={(ev) => this.handleTransitionEnd(ev)}....

奇怪的是我的日志充满了结束。即使我根本没有任何与该元素相关的转换 CSS 逻辑。它似乎在每次状态更改或重新渲染时都会触发。这是正常的吗？我希望它仅在 css 转换结束时触发。

还有其他方法可以实现此回调吗？

谢谢

更新:

这是一个沙箱，显示出一些奇怪的地方:https://codesandbox.io/s/vy5wwyq5v3

单击第一个按钮会导致回调被调用 3 次，然后如果单击第二个按钮，即使没有发生转换，它也会被调用另外 2 次。我的应用程序比这更极端，它被调用的频率更高。

Answer 1

正在使用的 css 过渡 transition: "all 3s" 会导致多个属性发生过渡，而不仅仅是 margin-left。

在提供的示例中，outline-color 和 outline-width 也进行了转换。然后，当单击其他任何位置(不仅仅是第二个按钮)时，它们会再次转换。

您可以通过检查事件来看到这一点:

onTransitionEnd={e => {
  e.persist();                 // see: https://reactjs.org/docs/events.html#event-pooling
  console.log(e.propertyName);
}}

CSS 过渡可以更具体:transition: "margin-left 3s" 以避免这种情况。 或者，测试 e.propertyName 是否符合所需情况。