尽管值相等，但单击事件会产生不同的转换延迟

Question

我正在 React 中创建一个简单的下拉菜单。下拉列表的初始事件按预期工作。但是，当收回下拉菜单时，尽管默认值相同，但过渡过程中有明显的延迟。

CSS 过渡属性相同，所以我不确定为什么会有延迟。为了确定，我还将两者的转换延迟值明确设置为 0。

这里是组件

class DrawerLink extends React.Component {
  constructor() {
    super();
    this.state = { collapse: false };
    this.handleLinkToggle = this.handleLinkToggle.bind(this);
  }

  handleLinkToggle(e) {
    this.setState({ collapse: !this.state.collapse });
  }

  render() {
    const { collapse } = this.state;
    return (
      <div className="DrawerLinkContainer">
        <div onClick={this.handleLinkToggle}>
          <div className="image-container">
            <img src="../public/images/user.jpeg" />
          </div>
          <p>Steave Jobs</p>
        </div>
        <div
          className={
            collapse ? "sub-menu-container collapse" : "sub-menu-container"
          }
        >
          <p>First Sub Menu</p>
          <p>Second Sub Menu</p>
        </div>
      </div>
    );
  }
}

和CSS：

.sub-menu-container {
  padding-left: 40px;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 1s linear 0s;
  &.collapse {
    max-height: 500px;
    transition: max-height 1s linear 0s;
  }
  p {
    padding: 7px 35px 7px 15px;
  }
}

Answer 1

因为您已将 max-height 设置为 500px 而您的内容只有 60px 左右，所以第一个转换仍在执行，导致看起来像是延迟。 I.E 增加到 500px 的 "max height"。

如果在子容器上设置背景颜色并将高度设置为等于 collapse class 中的最大高度，您会看得更清楚。类似于：

.sub-menu-container {
    padding-left: 40px;
    max-height: 500px;
    overflow: hidden;
    transition: max-height 1s linear 0s;
    background: red;
    &.collapse {
        max-height: 0px;
    }
    p {
        padding: 7px 35px 7px 15px;
    }
}

真正的解决方案是使用动画库，因为当 React 从 DOM 中删除元素时，转换会出现问题（它们根本不起作用）。

如果您需要示例的解决方案，则需要知道子容器的高度并将其用作最大高度。虽然它不是很动态。

尽管值相等，但单击事件会产生不同的转换延迟

Click event produces different transition delays, despite equal values

css

css-transitions

reactjs