Animation 初始动画期间的问题

但我还是犯了一个错误-

失败的属性类型：未向提供transitionLeaveTimeout ReactCSTranssitionGroup：这可能会导致不可靠的动画和 在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>
        )
    }

var reactcstransitiongroup=require（'react-addons-css-transition-group'）；
render（）{
const{…others}=this.props；
返回(
{this.state.clicked？
：false}
)
}

“反应”：“^15.2.1”

---

我不知道问题出在哪里…

您收到的警告是由于以下文件中记录的更改引起的：

附加组件：为了提高可靠性，CSSTransitionGroup将不再侦听转换事件。相反，您应该使用诸如transitionEnterTimeout={500}之类的道具手动指定转换持续时间

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

您需要自己添加这两个道具（

TransitionIntertimeout

和

transitionLeaveTimeout

）

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

---

如果需要，您还可以使用

transitiononenter={false}

或

transitionLeave={false}

道具对

reactcstranitiongroup

禁用动画

enter

和

leave

事件的动画。您收到的警告是由于以下文档中记录的更改引起的：

附加组件：为了提高可靠性，CSSTransitionGroup将不再侦听转换事件。相反，您应该使用诸如transitionEnterTimeout={500}之类的道具手动指定转换持续时间

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

您需要自己添加这两个道具（

TransitionIntertimeout

和

transitionLeaveTimeout

）

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

---

如果需要，您还可以使用

transitiononenter={false}

或

transitionLeave={false}

将

enter

和

leave

事件设置为

reactcstranitiongroup
的动画，您必须向
reactcstranitiongroup
组件添加
transitionLeaveTimeout
，因此，渲染的保留超时时间为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>
    )
}

var reactcstransitiongroup=require（'react-addons-css-transition-group'）；
render（）{
const{…others}=this.props；
返回(
{this.state.clicked？
：false}
)
}
您必须将
transitionLeaveTimeout
添加到
ReactCSStransitongGroup
组件中，使渲染看起来有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>
    )
}

var reactcstransitiongroup=require（'react-addons-css-transition-group'）；
render（）{
const{…others}=this.props；
返回(
{this.state.clicked？
：false}
)
}
Ok，不是没有任何错误，机器人没有任何动画效果…：（我的css看起来-。示例输入{opacity:0.01；}。示例输入。示例输入-活动{opacity:1；转换：不透明度500ms放松；}。示例离开{opacity:1；}。示例离开。示例离开-活动{opacity:0.01；转换：不透明度300ms放松；}Sry，我在css中错过了apear，现在它工作了（y）感谢一个洛蒂写了一条评论，因为你在初始装载期间强制执行动画，你也需要这些CSS，但你自己发现了。太好了。有没有办法设置卸载的CSS？与Apear相反，类似于消失？我试过了。示例消失，但据我所知不起作用，
appear
用于初始外观，然后我们使用
enter
和
leave
，我认为典型的用例是假设卸载将与
leave
相同。好的，没有任何错误，机器人没有任何动画效果…：（我的css看起来-。示例enter{opacity:0.01；}.example-enter.example-enter-active{opacity:1；transition:opacity 500ms ease-in；}.example-leave{opacity:1；}.example-leave.example-leave-active{opacity:0.01；transition:opacity 300ms ease-in；}Sry，我错过了css中的apear，现在它可以工作了（y）感谢一个洛蒂写了一条评论，因为你在初始装载期间强制执行动画，你也需要这些CSS，但你自己发现了。太好了。有没有办法设置卸载的CSS？与Apear相反，类似于消失？我试过了。示例消失，但据我所知不起作用，
appear
用于初始外观，然后我们使用
enter
和
leave
，我认为典型的用例是假设卸载与
leave
相同。