Событие Click приводит к различным задержкам перехода, несмотря на равные значения - PullRequest
Новая
       12

Событие Click приводит к различным задержкам перехода, несмотря на равные значения

0 голосов
/ 06 марта 2019

Я создаю простое выпадающее меню в 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;
  }
}

1 Ответ

0 голосов
/ 06 марта 2019

Поскольку вы установили max-height на 500 пикселей, а ваш контент составляет всего около 60 пикселей, первый переход все еще выполняется, что вызывает задержку.IE увеличивается до "максимальной высоты" в 500 пикселей.

Вы можете лучше видеть, если вы установите цвет фона для субконтейнера и установите высоту, равную максимальной высоте в классе 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;
    }
}

Реальным решением является использование библиотеки анимации, потому что у переходов возникают проблемы (они просто не работают), когда элемент удаляется из DOM с помощью React.

Есливам нужно решение для вашего примера, вам нужно знать высоту субконтейнера и использовать его в качестве максимальной высоты.Это не очень динамично, хотя.

...