如何为有条件渲染的组件添加动画效果？

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>
    );
  }
}

这个工具看起来很棒，但有一些我无法理解的地方。我的组件根据breakWith属性呈现按钮或侧边导航。单击呈现的按钮仍会使SideNav滑入，这次还带有一个遮罩。过渡允许平稳的滑入动画，但现在我想在单击遮罩时应用一个滑出动画。

几个小时过去了，我开始觉得这是不可能的。组件的渲染是有条件且基于状态的(render()中的 isThere？(...部分)，对吗？由于该包没有willLeave属性，似乎没有时间在状态更改和重新渲染之间对离开进行动画处理，因为有条件地呈现的元素已经消失了。

或者是我漏掉了什么?

- Jakub Strebeyko

---

嗨，大家好，发现了这个看起来相关的问题（https://github.com/souporserious/react-motion-ui-pack/issues/66）。我会尝试一下并发布结果。 - Jakub Strebeyko

Answer 1

是的 - 在这里找到的答案有效地解决了这个问题。为了解决这个问题，我将组件的条件逻辑向上移动，创建了适当的变量，并在render()中封装在一个<Transition>中。如果要从中吸取教训，那么就是来自Reakt Motion UI Pack（以及其他地方）的<Transition>如果被条件语句包围，则不会触发其leave动画，这使得它无法与三元运算符一起使用，如果您不希望false组件也被动画化。

- Jakub Strebeyko