ReactCSSTransitionGroup 无效

Question

我集成了ReactCSSTransitionGroup，但是没有动画效果。希望得到以下结构错误提示：

import { Router, Route, IndexRoute, browserHistory } from 'react-router'
import ReactCSSTransitionGroup = require('react-addons-css-transition-group')

...
return (
...
    <ReactCSSTransitionGroup
       transitionName = "mainpage"
       transitionEnterTimeout={ 500 }
       transitionLeaveTimeout={ 300 }>
       <Router key="router" history={ browserHistory }>
          <Route key="/" path="/" component={ App }>
             <IndexRoute key="MainTiles" component={ MainTiles } />
             <Route key="Page1" path="page1" component={ Page1 } />
          </Route>
       </Router>
    </ReactCSSTransitionGroup>
...
)

我的 css 是：

.mainpage-enter { opacity: 0; transition: opacity 100ms ease-in; }
.mainpage-enter.mainpage-enter-active { opacity: 1; transition: opacity 100ms ease-in; }
.mainpage-leave { opacity: 1; transition: opacity 100ms ease-in; }
.mainpage-leave.mainpage-leave-active { opacity: 0; transition: opacity 100ms ease-in; }

Answer 1

我相信您希望拥有转换生命周期方法的组件需要是 ReactCSSTransitionGroup 的直接子组件。

例如：

<Router key="router" history={ browserHistory }>
    <Route key="/" path="/" component={ App }>
        <IndexRoute key="MainTiles" component={ MainTiles } />
        <Route key="Page1" path="page1" component={ Page1 } />
    </Route>
</Router>

里面 App.js:

class App extends Component {
    render() {
        return (
            <div>
                <ReactCSSTransitionGroup
                    component="div"
                    transitionName="example"
                    transitionEnterTimeout={500}
                    transitionLeaveTimeout={500}
                >
                    {React.cloneElement(this.props.children, {
                        key: this.props.location.pathname,
                    })}
                </ReactCSSTransitionGroup>
            </div>
        );
    }
 }

Answer 2

没关系，我找到了一些有效的示例代码：

class App extends Component<any, any> {
    render() {
        return (
            <div>
        <ReactCSSTransitionGroup
            component="div"
            transitionName="mainpage"
            transitionEnterTimeout={500}
            transitionLeaveTimeout={500}
            >
            { 
                React.cloneElement(this.props.children, {
                    key: this.props.location.pathname
                }) 
            }
        </ReactCSSTransitionGroup>

            </div>
        )
    }
}

显然主要要求是直接出身，以及为动画组件注入密钥。

ReactCSSTransitionGroup 无效

ReactCSSTransitionGroup having no effect

reactcsstransitiongroup