React: Animieren eines Seitenwechsels

Question

Ich habe mich gefragt, ob irgendjemand einen Einblick geben könnte, wie man mit React.js einen animierten Komponenten-/Seitenwechsel erreichen kann.

Was ich erreichen möchte, ist eine Komponente/Seite Übergang wie die auf http://www.semplicelabs.com/ - eine Kopfzeile, die Deckkraft und Rand-Top und einen Inhalt, der die Deckkraft übergeht.

Wenn eine neue Komponente/Seite Übergang neue Komponente/Seite gezeigt wird, sollte die aktuell angezeigte Komponente/Seite transitioning vor die in die ich bisher Was haben ein LayoutComponent ist, die eine Seite Komponente in eine CSSTransitionGroup macht.:

import React from 'react/addons'; 

export default class LayoutComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { page: '' }; 
    }, 

    setPage(page) { 
    this.setState({ page }); 
    } 

    render() { 
    return (
     <React.addons.CSSTransitionGroup transitionName='page'> 
     {this.state.page} 
     </React.addons.CSSTransitionGroup> 
    ); 
    } 
} 

ich habe auch zwei Seitenkomponenten, FirstPage und SecondPage.

import React from 'react'; 

export default class FirstPage extends React.Component { 
    render() { 
    return (
     <div> 
     <header className='header'> 
      <div className='container'> 
      First Header 
      </div> 
     </header> 
     <div className='content'> 
      <div className='container'> 
      First Content 
      </div> 
     </div> 
     </div> 
    ); 
    } 
} 

Die einzigen Unterschiede zwischen SecondPage Code und FirstPage Code sind die Inhalte in dem .container divs und die Klassen-Namen.

Was ich dann versuchte zu tun, ist eine Pause Übergang mit .8s Dauer und eine Eingabe Übergang mit beiden .8s Dauer und Verzögerung. Das Hauptproblem, das ich sehe, ist, dass die neue Seitenkomponente montiert wird, bevor der Übergang der alten Seite beendet ist. Dies ist meine aktuelle CSS:

.page-enter { 
    background-color: #f2f2f2; 
    transition: background-color .8s linear .8s; 
} 

.page-enter-active { 
    background-color: #f2f1f1; 
} 

.page-leave { 
    background-color: #f2f1f1; 
    transition: background-color .8s linear; 
} 

.page-leave-active { 
    background-color: #f2f2f2; 
} 

.page-enter .header { 
    margin-top: -80px; 
    opacity: 0; 
    transition: opacity .8s ease-in-out .8s; 
    transition: margin-top .8s ease-in-out .8s; 
} 

.page-enter-active .header { 
    margin-top: 0; 
    opacity: 1; 
} 

.page-leave .header { 
    margin-top: 0; 
    opacity: 1; 
    transition: opacity .8s ease-in-out; 
    transition: margin-top .8s ease-in-out; 
} 

.page-leave-active .header { 
    margin-top: -80px; 
    opacity: 0; 
} 

.page-enter .content { 
    opacity: 0; 
    transition: opacity .8s ease-in-out .8s; 
} 

.page-enter-active .content { 
    opacity: 1; 
} 

.page-leave .content { 
    opacity: 1; 
    transition: opacity .8s ease-in-out; 
} 

.page-leave-active .content { 
    opacity: 0; 
} 

Ich weiß, dass ich die anfängliche mit transitionAppear={true} Montag animieren könnte - aber das stimmt nicht mit dem Problem der neuen Komponente nicht helfen, montiert wird, bevor die alte wird umgestellt werden.

Dies ist ein Problem, mit dem ich seit ein paar Tagen Probleme habe und für das ich keine Lösung finden kann.

Einige Code zu spielen, um: https://jsfiddle.net/gonsfx/xva2g6oo/

Answer 1

ich habe einen Zustand zu den Seiten hinzugefügt eine opacity (für die Animation) zu speichern und auf 1 setzen (initial = 0), wenn die Komponente mit anbrachte eine kleine Verzögerung. Also habe ich jeder Seite zwei Funktionen hinzugefügt.

componentDidMount() { 
    setTimeout(() => { 
     this.setState({ 
      opacity: 1 
     }); 
    }, 20); 
} 

getStyle() { 
    return { opacity: this.state.opacity }; 
} 

Dann habe ich einen Konstruktor anfänglichen Sachen zu machen ....

constructor(props) { 
    super(props); 
    this.state = { opacity: 0 }; 
    this.getStyle = this.getStyle.bind(this); 
    this.componentDidMount = this.componentDidMount.bind(this); 
} 

Here eine DEMO ist.

Die Komponenten werden sofort auf der Seite erscheinen, daher denke ich, dass es nicht möglich ist, eine Fade-Out-Animation zu machen (Zumindest habe ich keine Lösung dafür gefunden).

Answer 2

OK. Nachdem ich eine Menge neuer und veralteter Dokumente durchwachte, habe ich es geschafft, das herauszufinden. Here is the solution

Grundsätzlich betrifft React-Router nur sich mit der Animation des übergeordneten Containers. Aber das bedeutet, dass mit ReactTransitionGroup, können wir in componentWillLeave Methode in der ausstehenden Komponente, wo wir einzelne Kinder manipulieren können Haken. Die Kinder-Komponenten können auch ReactCSSTransitionGroup Sport, um appear Übergang zu erleichtern.

Sie können möglicherweise nicht nur CSSTransitionGroup verwenden, aber eine Mischung aus CSSTransitionGroup und TransitionGroup.

So würde eine Änderung einer Seite automatisch die Kinder durch den Haken animieren, während die Eingabe einer Seite die CSSTransitionGroup für einzelne Animationen verwenden würde.

Die setTimeout in der Lösung kann wie ein Hack aussehen, aber das ist alles, was ich für jetzt tun konnte.