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

Question

我的代码

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

问题是什么

折叠动画完成后回调函数（onTransitionEnd）没有被调用。

应该怎么做？

- Sereyn

Answer 1

我也期望 addEndListener (Collapse API) 在动画之后触发，但事实并非如此。与Sereyn的答案类似，对我有用的是：

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

- fer0n

Answer 2

在mui.com的Collapse组件的API和react-transition-group库的Transition组件中，都没有像onTransitionEnd这样的属性。

根据你的需求，你可以使用addEndListener属性，在'in'和'out'动画结束时触发。或者你可以使用onExited属性，在'out'动画结束时触发。请注意，不要删除HTML标签。

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

- Dmitriif

---

onExited从未被触发，而addEndListener立即被触发，这不是我预期的。 - Sereyn

点击开关并查看控制台日志 - https://codesandbox.io/s/simplecollapse-material-demo-forked-lgdtos?file=/demo.tsxonExited会在动画的“out”阶段后触发。 - Dmitriif

啊，是的，onExited确实会在“out”阶段之后触发，但我仍然无法知道“in”阶段何时结束。我想我可以使用setTimeout，在动画播放所需的时间之后调用回调函数，但这将是一种hack方法。 - Sereyn