React Transition 组过渡动画无法退出

Question

过渡动画在进入时基于高度起作用，但在退出时动画不起作用。 初始高度为“0px”，在 entering 时将高度更改为 wrapper 高度，然后在 entered 状态高度设置为 'auto'。过渡动画在这里工作。

在 退出 之前，再次将高度设置为包装器高度，然后在 退出 时将高度更改为“0px”。过渡动画不会不在这里工作。

但是当在 onExit 方法上设置断点时它有效。

https://codesandbox.io/s/hopeful-grass-gp6v9?file=/src/App.js

Answer 1

只需将现有的过渡样式高度更改为自动，过渡现在可以正常工作了。

const transitionStyle = {
    entered: { height: "auto", overflow: "visible" },
    exiting: { height: "auto" }  /*change this */
  };