时间戳

首页 > 解决方案 > React onTransitionEnd 事件被频繁调用

reactjs - React onTransitionEnd 事件被频繁调用

问题描述

我有这样的反应代码：

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

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

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

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

谢谢

更新：

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

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

标签： reactjs

解决方案

正在使用的 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所需的情况。

推荐阅读