Reactjs 反应CSS过渡组，不工作？

对于这个问题的简单性，我深表歉意，但我是一个新手，不太会做出反应并尝试实现一个简单的CSSTransitionGroup来隐藏/显示元素，但是带有淡入、幻灯片等。文档似乎非常简单，但由于某些原因，下面的代码对我来说不适用

当.box在存在与否之间切换时，我看不到enter和leave上的任何CSS转换

class Demo extends React.Component{
    constructor(props) {
        super(props);
        this.state = { visible: false };
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState({ visible: ! this.state.visible });
    }

    render() {
        return <div>
            <button onClick={this.handleClick}>{this.state.visible ? 'Slide up' : 'Slide down'}</button>
            <ReactCSSTransitionGroup transitionName="example">
                { this.state.visible ? <div className='box' /> : null }
            </ReactCSSTransitionGroup>
        </div>
    }
}

.box {
  width: 200px;
  height: 100px;
  background: green;
  margin-top: 10px; }

.example-enter {
  height: 0px; }

.example-enter.example-enter-active {
  height: 100px;
  -webkit-transition: height .3s ease; }

.example-leave.example-leave-active {
  height: 0px;
  -webkit-transition: height .3s ease; }

类演示扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={visible:false}；
this.handleClick=this.handleClick.bind（this）
}
handleClick（）{
this.setState（{visible:！this.state.visible}）；
}
render（）{
返回
{this.state.visible？'Slide-up'：'Slide-down'}
{this.state.visible？：null}
}
}
.盒子{
宽度：200px；
高度：100px；
背景：绿色；
页边距顶部：10px；}
.输入示例{
高度：0px；}
.example-enter.example-enter-active{
高度：100px；
-webkit转换：height.3s ease；}
.example-leave.example-leave-active{
高度：0px；
-webkit转换：height.3s ease；}

我一定是做错了什么，因为我可以在其他在线示例中看到这个基本演示，但无法复制我自己。请让我知道如何获得我的CSS转换

---

Thx互联网

您是否检查了控制台的错误输出？因为当我运行你的代码时，我得到了：

“警告：未向提供失败的propType:TransitionOneInterTimeout。” ReactCSTranssitionGroup：这可能会导致不可靠的动画和 在React的未来版本中不受支持。请参阅 xxx了解更多信息 信息。检查

Demo

的渲染方法

“警告：失败 propType:未向提供transitionLeaveTimeout ReactCSTranssitionGroup：这可能会导致不可靠的动画和 在React的未来版本中不受支持。请参阅 xxx了解更多信息 信息。检查

Demo

的渲染方法

添加两个缺少的道具，效果很好

class Demo extends React.Component{
    constructor(props) {
        super(props);
        this.state = { visible: false };
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState({ visible: ! this.state.visible });
    }

    render() {
        return <div>
            <button onClick={this.handleClick}>{this.state.visible ? 'Slide up' : 'Slide down'}</button>
            <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={300} transitionLeaveTimeout={300} >
                { this.state.visible ? <div className='box' /> : null }
            </ReactCSSTransitionGroup>
        </div>
    }
}

类演示扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={visible:false}；
this.handleClick=this.handleClick.bind（this）
}
handleClick（）{
this.setState（{visible:！this.state.visible}）；
}
render（）{
返回
{this.state.visible？'Slide-up'：'Slide-down'}
{this.state.visible？：null}
}
}

---

TransitionIntertimeout

和

transitionLeaveTimeout

都采用一个表示转换持续时间的数字（以毫秒为单位），因此0.3秒转换为“300”，这与您指定的CSS转换相匹配。

您是否检查了控制台的错误输出？因为当我运行你的代码时，我得到了：

“警告：未向提供失败的propType:TransitionOneInterTimeout。” ReactCSTranssitionGroup：这可能会导致不可靠的动画和 在React的未来版本中不受支持。请参阅 xxx了解更多信息 信息。检查

Demo

的渲染方法

“警告：失败 propType:未向提供transitionLeaveTimeout ReactCSTranssitionGroup：这可能会导致不可靠的动画和 在React的未来版本中不受支持。请参阅 xxx了解更多信息 信息。检查

Demo

的渲染方法

添加两个缺少的道具，效果很好

class Demo extends React.Component{
    constructor(props) {
        super(props);
        this.state = { visible: false };
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState({ visible: ! this.state.visible });
    }

    render() {
        return <div>
            <button onClick={this.handleClick}>{this.state.visible ? 'Slide up' : 'Slide down'}</button>
            <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={300} transitionLeaveTimeout={300} >
                { this.state.visible ? <div className='box' /> : null }
            </ReactCSSTransitionGroup>
        </div>
    }
}

类演示扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={visible:false}；
this.handleClick=this.handleClick.bind（this）
}
handleClick（）{
this.setState（{visible:！this.state.visible}）；
}
render（）{
返回
{this.state.visible？'Slide-up'：'Slide-down'}
{this.state.visible？：null}
}
}

---

TransitionIntertimeout

和

transitionLeaveTimeout

都采用一个表示转换持续时间（毫秒）的数字，因此0.3秒转换为“300”，这与您指定的CSS转换相匹配。

谢谢！原来我安装的npm库

react addons transition group

不正确，我需要

react addons css transition group

doi。谢谢！原来我安装的npm库

react addons转换组

不正确，我需要

react addons css转换组

doi。