Question

我仍然收到错误 -

失败的道具类型：未提供transitionLeaveTimeout ReactCSSTransitionGroup：这会导致不可靠的动画和将来的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>
        )
    }

“反应”：“^ 15.2.1”，

我不知道问题出在哪里......

Answer 1

您收到的警告是由React v0.14 changelog中记录的更改引起的：

附加组件：为了提高可靠性，CSSTransitionGroup将不再监听转换事件。相反，您应该使用props（例如transitionEnterTimeout = {500}。
）手动指定转换持续时间

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

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

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

如果您想使用enter或leave道具transitionEnter={false}，还可以停用动画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问题

2 个答案: