Question

我正在构建一个React组件，它根据prop返回两个组件之一。

if (!this.prop.myProp) {
  return (<Compontent1 />)
} else {
  return (<Compontent2 />)
}

当prop发生变化时，我希望被移除的元素过渡掉，而出现的元素应该过渡。

新元素上的transitionEnter运行正常。这是通过将组件包装在ReactCSSTransitionGroup中并使用转换规则添加适当的类来完成的。

元素离开的转换不起作用。它会立即消失，并且输入元素上的transitionEnter开始。这是我的完整代码：

if (!user) {
    header = (
      <ReactCSSTransitionGroup key="login"
                               component="div"
                               className="app-header--login"
                               transitionName="login"
                               transitionEnter={false}
                               transitionEnterTimeout={0}
                               transitionLeave={true}
                               transitionLeaveTimeout={600}>
        <button className="button button--login"
                onClick={this._handleLogin.bind(this)}>
          Join
        </button>
      </ReactCSSTransitionGroup>
    )
  } else {
    header = (
      <ReactCSSTransitionGroup key="form"
                               component="div"
                               className="app-header--form"
                               transitionName="form"
                               transitionEnterTimeout={0}
                               transitionLeaveTimeout={0}
                               transitionAppear={true}
                               transitionAppearTimeout={600}>
        <Form user={user} />
      </ReactCSSTransitionGroup>
    )
}

return ({header});

目前过渡类有意简单，以确保过渡正常。

.login-leave {
  position: absolute;
  opacity: 0;
  transition: opacity 0.6s ease-in;
}

.login-leave.login-leave-active {
  opacity: 1;
  transition: opacity 0.6s ease-in;
}

我是否错误地实施了transitionLeave？

Answer 1

＆＃34;我是否正确实施transitionLeave？＆＃34;我不这么认为。

但是您错放了key属性。

应该在孩子中，而不是在ReactCSSTransitionGroup中。这就是为什么transitionLeave不起作用的原因，React并不知道哪些孩子已进入或离开。

  return (<div>
      <ReactCSSTransitionGroup 
                               component="div"
                               className="app-header--login"
                               transitionName="login"
                               transitionEnter={false}
                               transitionEnterTimeout={0}
                               transitionLeave={true}
                               transitionLeaveTimeout={600}>
        {!user ? <button key="login" className="button button--login"
                onClick={this._handleLogin.bind(this)}>
          Join
        </button> : null}
      </ReactCSSTransitionGroup>
      <ReactCSSTransitionGroup 
                               component="div"
                               className="app-header--form"
                               transitionName="form"
                               transitionEnterTimeout={0}
                               transitionLeaveTimeout={0}
                               transitionAppear={true}
                               transitionAppearTimeout={600}>
        {user ? <Form key="form" user={user} /> : null}
      </ReactCSSTransitionGroup>
    </div>)

在if / else返回时React TransitionLeave

1 个答案: