React onTransitionEnd 事件被频繁调用答案

【问题标题】：React onTransitionEnd event gets called frequentlyReact onTransitionEnd 事件被频繁调用
【发布时间】：2019-02-17 14:31:30
【问题描述】：

我有这样的 React 代码：

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

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

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

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

谢谢

更新：

这是一个显示出一些奇怪的沙盒：https://codesandbox.io/s/vy5wwyq5v3

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

【问题讨论】：

标签： reactjs

【解决方案1】：

使用的 css 过渡 transition: "all 3s" 导致多个属性的过渡，而不仅仅是左边距。

在提供的示例中，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 以获得所需的情况。

【讨论】：