首页 文章

如何为有条件渲染的组件设置动画？

提问于
浏览 次
3

我正在尝试使用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 允许平滑的滑入式动画，但现在我想在点击叠加层时应用滑出式动画 .

几个小时过去了，我开始认为这是不可能的 . 组件的渲染是有条件的和基于状态的（ render() 中的 isThere ? (... 部分），对吧？由于包没有提供 willLeave 道具，似乎没有时间在状态更改和重新渲染之间动画 leave ，条件渲染元素已经丢失 .

或者我错过了什么？

javascript reactjs animation react-motion

1 回答

  • 2

    是的 - 找到答案here有效地解决了这个问题 . 为了解决这个问题，我移动了组件 up 的条件逻辑，创建了适当的变量，并将其封装在 render() 中的 <Transition> 中 . 如果要在这里学习一课，那么Reakt Motion UI Pack来自Reakt Motion UI Pack（或许，在其他地方）如果被条件语句包围，则不会触发 leave 动画，如果不这样做，则无法与 ternary operator 一起使用它希望 false 组件也是动画的 .

    回复于

相关问题