点击事件尽管值相等，但仍会产生不同的过渡延迟

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，因此第一个过渡仍在执行造成延迟。即增加到500px的"最大高度"。

如果在子容器上设置背景颜色，并将高度等于collapse类中的最大高度，则可以更好地看到。类似：

.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中删除时，过渡存在问题（它们只是不起作用）。

如果您需要解决示例的解决方案，则需要知道子容器的高度，并将其用作最大高度。