reactjs - React CSS Transition Group が機能していませんか?

Question

この問題の単純さをお詫びしますが、私は React を初めて使用し、単純な CSSTransitionGroup を実装して要素を表示/非表示にしようとしていますが、フェード、スライドなどを使用しています。ドキュメントは非常に単純に見えますが、何らかの理由で次のコード私にはうまくいきません。

.box が存在するかどうかを切り替えますが、開始時と終了時に 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; }

この基本的なデモが他のオンラインの例で機能しているのを見ることができますが、自分自身を複製することはできません。CSS トランジションを取得する方法を教えてください。

Thxインターネット