Reaction Animationen - Slide zwischen Komponenten

Question

Ich habe eine neue ReactJS App. Ich versuche, zwischen Ansichten mithilfe des ReactCSSTransitionGroup-Plugins zu animieren, aber die Animationsklassen werden nicht wie erwartet angewendet. Keine Animationen scheinen zu stattfinden. Fehle ich etwas?

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> 

Answer 1

Das Problem ist, Sie keine Schlüssel auf den zurückgegebenen Komponenten einstellen. Z.B.

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

Hier ist eine Geige, die eine vereinfachte Version Ihres Codes zeigt. Klicken Sie auf die Schaltfläche, um die Animation zu sehen. Entfernen Sie den Schlüssel von Seite 1 und Seite 2, um ihn zu brechen.

http://jsbin.com/xoviholumi