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

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

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>
        )
    }
}

显然，主要要求是直接亲子关系，并为动画组件注入一把钥匙。

Answer 2

我认为您希望拥有转换生命周期方法的组件需要是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>
        );
    }
 }