"反应过渡"组"过渡动画"在退出时不起作用

Question

过渡动画在基于高度进入时有效，但在退出时无效。初始高度为"0px"，输入时将高度更改为包装器高度，然后进入状态时将高度设置为"自动"。过渡动画在这里工作。

在退出之前，高度再次设置为包装器高度，然后在离开时，高度更改为"0px"。过渡动画在此不起作用。

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

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

Answer 1

只需将现有的转换样式高度更改为auto，转换就可以正常工作了。

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