javascript - 反应过渡组过渡动画无法退出

Question

过渡动画在基于高度进入时起作用，但在退出动画时不起作用。初始高度为“0px”，输入更改高度为包装器高度，然后进入状态高度设置为“自动”。过渡动画在这里工作。

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

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

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

标签： javascriptcssreactjscss-transitionsreact-transition-group

Answer 1

只需将现有的过渡样式高度更改为自动，过渡现在按预期工作。

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