Reakcja: animowanie przełącznika strony

Question

Zastanawiam się, czy ktoś mógłby zapewnić wgląd w to, jak uzyskać animowany przełącznik komponentu/strony za pomocą pliku React.js.

Co chciałbym osiągnąć to przejście komponentu/strony, takie jak na http://www.semplicelabs.com/ - nagłówek, który przenosi krycie i margines górny oraz treść, która przenosi krycie.

Kiedy nowy komponent/strona jest pokazana, aktualnie pokazany komponent/strona powinna przechodzić z przed nowy komponent/Strona przejście w to, co mam tak daleko jest LayoutComponent że renderuje komponent stronę na CSSTransitionGroup.:

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

mam też dwa elementy stron, FirstPage i 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> 
    ); 
    } 
} 

Jedyne różnice między kodem SecondPage i kodu FirstPage to zawartość w .container div oraz nazwę klasy.

Po tym, co próbowałem zrobić, należy dodać przejście na koniec okresu z czasem trwania .8s i przejściem przy wprowadzaniu z czasem i opóźnieniem w postaci .8s. Głównym problemem, jaki widzę, jest to, że nowy składnik strony jest montowany przed zakończeniem przejścia starego. To jest mój obecny 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; 
} 

wiem mogę animowanie montażu z transitionAppear={true} początkowy - ale to nie pomoże z problemem nowego komponentu jest zamontowany przed stara się przesiedli się.

Jest to problem, z którym zmagałem się przez kilka dni i nie mogę znaleźć rozwiązania.

Niektóre kod się bawić z: https://jsfiddle.net/gonsfx/xva2g6oo/

Answer 1

dodałem stan na stronach aby zapisać opacity (dla animacji) i ustawić ją na 1 (początkowa = 0), gdy składnik nie mocowanie małe opóźnienie. Więc dodałem dwie funkcje do każdej strony.

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

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

Potem dodaje konstruktor dokonać wstępnej rzeczy ....

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

Here jest demo.

Komponenty pojawią się natychmiast na stronie, więc myślę, że nie jest możliwe wykonanie animacji zaniku (przynajmniej nie znalazłem na to rozwiązania).

Answer 2

OK. Po przejrzeniu wielu najnowszych i przestarzałych dokumentów udało mi się to rozwiązać. Here is the solution

Zasadniczo router reagowania dotyczy tylko animacji kontenera nadrzędnego. Ale to oznacza, że ​​używając ReactTransitionGroup, możemy podłączyć się do metody componentWillLeave w komponencie wychodzącym, gdzie możemy manipulować poszczególnymi dziećmi. Komponenty dla dzieci mogą również mieć sport ReactCSSTransitionGroup w celu ułatwienia przejścia appear.

Możesz więc nie być w stanie używać tylko CSSTransitionGroup, ale mieszankę CSSTransitionGroup i TransitionGroup.

W ten sposób zmiana strony automatycznie animowałaby dzieci przez hak, podczas gdy wprowadzanie strony korzystałoby z CSSTransitionGroup dla poszczególnych animacji.

Rozwiązanie setTimeout może wydawać się hakerem, ale to wszystko, co udało mi się zrobić na razie.