0

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; }
4

2 に答える 2

0

トランジション ライフサイクル メソッドを必要とするコンポーネントは、 の直接の子である必要があると思います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>
        );
    }
 }
于 2016-02-01T20:57:47.040 に答える