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无效

2 个答案: