Как анимировать условно визуализированные компоненты?

Question

Я пытаюсь использовать React Motion UI Pack, чтобы анимировать анимацию скольжения / выдвижения для боковой навигации. Это оно:

constructor(props){
  super(props);
  this.state = {
    isThere: false,
    showOverlay: false
  } 
  this.updatePredicate = this.updatePredicate.bind(this);
  this.handleToggleClick = this.handleToggleClick.bind(this);
  this.handleOverlayClick = this.handleOverlayClick.bind(this);
}

componentDidMount() {
  this.updatePredicate();
  window.addEventListener("resize", this.updatePredicate);
}

componentWillUnmount() {
  window.removeEventListener("resize", this.updatePredicate);
}

updatePredicate() {
  this.setState({ isThere: window.innerWidth > this.props.breakWidth })
}

handleToggleClick(){
  this.setState({
    isThere: true,
    showOverlay: true
  })
}

handleOverlayClick(){
  this.setState({
    isThere: false,
    showOverlay: false
  });
}

let sidenav = (
  <Tag {...attributes} className={classes} key="sidenav">
    <ul className="custom-scrollbar">
      {src &&
        <li>
          <div className="logo-wrapper">
            <a href={href}>
              <img src={src} className="img-fluid"/>
            </a>
          </div>
        </li>
      }
      {children}
    </ul>
  </Tag>
);

return (
  <div>
    { isThere ? (
      <Transition
      component={false}
      appear={{ opacity: 0.2, translateX: -300 }}
      enter={{ opacity: 1, translateX: 0 }}
      leave={{ opacity: 0.2, translateX: -300 }}
    >
        { sidenav }
      </Transition>
      ) : (
        <Button color="primary" onClick={this.handleToggleClick} key="sideNavToggles">ClickMe</Button>
      ) }
    {showOverlay && (
      <div id="sidenav-overlay" onClick={this.handleOverlayClick} key="overlay"></div>
    )}
  </div>
    );
  }
}

Утилита кажется потрясающей, но есть кое-что, что я не могу обернуть вокруг себя. Мой компонент отображает кнопку или sidenav в зависимости от breakWith двигательный Нажатие на визуализированную кнопку вызывает скольжение SideNav, на этот раз вместе с оверлеем. Transition допускается плавная вставка анимации, но теперь я хотел бы применить выдвижную анимацию при нажатии на оверлей.

Прошло несколько часов, и я начинаю думать, что это невозможно. Рендеринг компонентов является условным и основанным на состоянии (isThere ? (... участие в render()), право? Как пакет предлагает нет willLeave реквизит, кажется, нет времени оживить leave между изменением состояния и повторным рендерингом с условно отображаемым элементом, который уже отсутствует.

Или я что-то упустил?

Answer 1

Да - найденный здесь ответ эффективно решает проблему. Чтобы решить эту проблему, я переместил условную логику компонента вверх, создал соответствующую переменную и инкапсулировал ее внутри <Transition> в render(), Если здесь есть урок, то это <Transition> из Reakt Motion UI Pack (и, возможно, в другом месте) не запускает его leave анимация, если она окружена условным оператором, что делает невозможным ее использование вместе с ternary operator если ты не хочешь false компонент, который будет анимирован.