初始动画期间的 Reactjs 问题

Question

我仍然收到错误 -

Failed prop type: transitionLeaveTimeout wasn't supplied to ReactCSSTransitionGroup: this can cause unreliable animations and won't be supported in a future version of React

我的渲染效果 -

var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

render(){
        const {...others} = this.props;
        return(<div id="navigation">
            <img id="openNav" onClick={this.handleClick} src={this.state.source}/>
             {this.state.clicked ?
                 <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}>
                    <Navigation {...others} />
                 </ReactCSSTransitionGroup>: false}
            </div>
        )
    }

"react": "^15.2.1",

不知道哪里出了问题...

Answer 1

您收到的警告是由于 React v0.14 changelog 中记录的更改所致：

Add-Ons: To improve reliability, CSSTransitionGroup will no longer listen to transition events. Instead, you should specify transition durations manually using props such as transitionEnterTimeout={500}.

代码示例已在 the documentation 中更新，但道具并未真正记录在案。

您需要自己添加这两个道具（transitionEnterTimeout 和 transitionLeaveTimeout）。

<ReactCSSTransitionGroup 
  transitionName="example" 
  transitionAppear={true} 
  transitionAppearTimeout={500} 
  transitionEnterTimeout={500} 
  transitionLeaveTimeout={500}>

如果需要，您还可以禁用动画 enter 和 leave 事件，方法是使用 ReactCSSTransitionGroup 或 transitionLeave={false} 道具 ReactCSSTransitionGroup.

Answer 2

您必须将 transitionLeaveTimeout 添加到您的 ReactCSSTransitionGroup 组件，因此您的渲染看起来像这样有 500 毫秒的离开超时：

var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

 render(){
    const {...others} = this.props;
    return(<div id="navigation">
        <img id="openNav" onClick={this.handleClick} src={this.state.source}/>
         {this.state.clicked ?
             <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionLeaveTimeout={500}>
                <Navigation {...others} />
             </ReactCSSTransitionGroup>: false}
        </div>
    )
}

初始动画期间的 Reactjs 问题

Reactjs issues during Initial Animation

animation

reactjs

mount