Ich möchte zwischen zwei Komponenten animieren, bei denen die erste Komponente ausgeblendet wird und aus dem DOM entfernt wird, bevor die nächste Komponente zum DOM hinzugefügt und eingeblendet wird. Andernfalls wird die neue Komponente hinzugefügt das DOM und belegt Speicherplatz, bevor die alte Komponente entfernt wird. Sie können das Problem in dieser Geige sehen:Reagiere den Übergang zwischen den Komponenten
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>
eine inakzeptable Lösung (für mich) ist die ursprüngliche Komponente mit CSS zu verstecken, bevor auf die neue Komponente Übergang wie hier zu sehen:
http://jsfiddle.net/phepyezx/5
// Change to css
.switch-leave {
visibility: hidden;
height: 0px;
width: 0px;
opacity: 1.0;
}
gibt es eine Möglichkeit, „Verzögerung“ reagieren von einer neuen Komponente vor dem Original entfernt Montage? Ich bin offen für Geschwindigkeit oder eine andere Bibliothek, um dies zu erreichen.
Dank
@JonnyBuchanan Beide Ansätze scheinen nützlich zu sein. Nun, da einige Zeit vergangen ist, welche Vorgehensweise hat sich für Sie am besten bewährt? @RickJolly, funktioniert dein Ansatz am besten für bestimmte Szenarien? Skaliert es sich in ReactCSSTransitionGroup auf größere Listen (Kinder)? Die Art, wie ich es verstehe, ist, dass Ihr Ansatz einen zusätzlichen 'render()' -Zyklus eingeht (vielleicht ein zusätzlicher Zyklus für jeden entfernten Gegenstand?). Haben Sie das gefunden, um Vorteile oder Nachteile zu haben? (Vielleicht Debuggen - vielleicht ist es klarer, was ist mit dem zusätzlichen 'render()'?) –
Auch, was ist mit der Tatsache, dass die zu animierenden Komponenten 'componentWillUnmount' implementieren müssen, sowie die' handleTransitionEnd() ' als "Stütze" ... hast du das als Schmerz für andere Situationen empfunden? –