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中移除时，过渡会出现问题（它们只是不起作用）。

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

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

1 个答案: