Material UI 5：如何知道折叠过渡何时完成？答案

【问题标题】：Material UI 5: How to know when Collapse transition is finished?Material UI 5：如何知道折叠过渡何时完成？
【发布时间】：2023-02-01 19:23:20
【问题描述】：

我的代码

    <Collapse
      in={expanded}
      onTransitionEnd={() => console.log('finished')}
    >
        <div>foo</div>
    </Collapse>

怎么了

折叠动画结束时不会调用回调 (onTransitionEnd)。

我应该怎么做？

【问题讨论】：

标签： javascript reactjs animation browser material-ui

【解决方案1】：

在 API of Collapse 组件和 react-transition-group 的 Transition component 中都没有 onTransitionEnd 这样的道具。

根据您的具体需求，您可以使用 addEndListener 道具，它会在“进”和“出”动画结束时触发，或者使用 onExited 会在“出”动画结束时触发。

          <Collapse
            addEndListener={() => console.log("done")}
            onExited={() => console.log("finished")}
            in={checked}
          >
            {icon}
          </Collapse>

【讨论】：

onExited 永远不会被触发并且 addEndListener 会立即被触发，这不是我所期望的
单击开关并查看控制台日志 - codesandbox.io/s/… onExited 确实在动画的“退出”阶段后触发。
啊，是的，onExited 确实在“退出”阶段后触发，但我仍然无法知道“进入”阶段何时结束。我想我可以使用 setTimeout 在动画播放所需的时间量之后调用回调函数，但这将是一个 hack。

【解决方案2】：

我还期望 addEndListener (Collapse API) 触发后动画，事实并非如此。类似于 Sereyn 的回答，这对我有用：

      <Collapse
        onEntered={() => console.log("expand animation done")}
        onExited={() => console.log("collapse animation done")}
        in={checked}
      >
        {icon}
      </Collapse>

【讨论】：