2016-09-23 45 views
1

我有一個新的ReactJS應用程序。我正在嘗試使用ReactCSSTransitionGroup插件在視圖之間進行動畫製作,但動畫類未按預期應用。似乎沒有動畫。我錯過了什麼嗎?React動畫 - 組件間滑動

React Animation Docs

import React, { Component } from 'react'; 
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 
import { connect } from 'react-redux'; 

import { FORM_PAGE, QUOTE_PAGE } from '../Config/Pages' 
import Form from './Form'; 
import Quote from './Quote'; 

class App extends Component { 
    render() { 
    return (
     <ReactCSSTransitionGroup 
     transitionName="page" 
     transitionEnterTimeout={300} 
     transitionLeaveTimeout={300} 
     > 
     {this.renderPage()} 
     </ReactCSSTransitionGroup> 
    ) 
    } 

    renderPage() { 
    switch (this.props.currentPage) { 
     case QUOTE_PAGE: 
     return (<Quote />); 
     case FORM_PAGE: 
     return (<Form />); 
     default: 
     return (<Quote />) 
    } 
    } 
} 

function mapStateToProps(state) { 
    return { 
    currentPage: state.app.currentPage 
    }; 
} 

export default connect(mapStateToProps)(App); 

CSS

<style> 
     .page-enter { 
     transform: translate(100%); 
     } 
     .page-enter.page-enter-active { 
     transform: translate(0%); 
     transition: transform 1000ms ease-in-out; 
     } 
     .page-leave { 
     transform: translate(0%); 
     } 
     .page-leave.page-leave-active { 
     transform: translate(-100%); 
     transition: transform 1000ms ease-in-out; 
     } 
    </style> 

回答

4

的問題是你沒有設置對返回的組件鍵。例如。

renderPage() { 
    switch (this.props.currentPage) { 
     case QUOTE_PAGE: 
     return (<Quote key={'quote'} />); 
     case FORM_PAGE: 
     return (<Form key={'form'} />); 
     default: 
     return (<Quote key={'quote'} />) 
    } 
    } 

下面是一個演示代碼的簡化版本的小提琴。點擊按鈕查看動畫。從Page1和Page2中刪除鍵以將其分開。

http://jsbin.com/xoviholumi

+0

好和簡單,謝謝你的 – Lee