Mi piacerebbe animare tra due componenti in cui il primo componente si dissolve e viene rimosso dal DOM prima che il componente successivo venga aggiunto al DOM e si dissolva. Altrimenti, il nuovo componente viene aggiunto a il DOM e occupa spazio prima che il vecchio componente venga rimosso. Si può vedere il problema in questo violino:Reagire animare la transizione tra i componenti
http://jsfiddle.net/phepyezx/4
// css snippet
.switch-enter {
opacity: 0.01;
}
.switch-enter.switch-enter-active {
opacity: 1.0;
}
.switch-leave {
opacity: 1.0;
}
.switch-leave.switch-leave-active {
opacity: 0;
}
// React snippet
<ReactCSSTransitionGroup transitionName="switch">
<div key={key} className={className}>{this.text()}</div>
</ReactCSSTransitionGroup>
Una soluzione inaccettabile (per me) è quello di nascondere il componente originale con i CSS prima di passare al nuovo componente come si vede qui:
http://jsfiddle.net/phepyezx/5
// Change to css
.switch-leave {
visibility: hidden;
height: 0px;
width: 0px;
opacity: 1.0;
}
c'è un modo per "ritardo" reagiscono da montaggio di un nuovo componente prima che l'originale è stato rimosso? Sono aperto alla velocità o qualche altra libreria per raggiungere questo obiettivo.
Grazie
@JonnyBuchanan Entrambi i tuoi approcci sembrano utili. Ora che è passato un po 'di tempo, quale approccio hai trovato che funziona meglio per te? @ RickJolly, il tuo approccio funziona meglio per determinati scenari? Scala bene le liste più grandi (bambini) all'interno di ReactCSSTransitionGroup? Il modo in cui capisco è che il tuo approccio incorre in un ciclo 'render()' in più (forse un ciclo in più per ogni oggetto che viene rimosso?). Hai trovato che avere vantaggi o svantaggi? (Forse debugging - forse è più chiaro cosa sta succedendo con l'extra 'render()'?) –
Inoltre, per quanto riguarda il fatto che i componenti da animare devono implementare 'componentWillUnmount', come pure prendere' handleTransitionEnd() ' come "prop" ... hai trovato che essere un dolore per altre situazioni? –