Wie kann die Elementhöhe in ReactCSSTransitionGroup reaktiviert werden?

Question

Ich versuche Elementhöhe mit ReactCSSTransitionGroup, zu animieren so ist es das, was ich die Animation wie wollen würde aussieht:

http://jsfiddle.net/cherrry/hgk4Lme9/

Das Problem ist, dass ich die Elementhöhe nicht immer wissen, so habe ich versucht, die scrollHeight, clientHeight oder etwas ähnliches während componentDidMount zu hacken und versuchen node.style.height oder fügen Sie Regeln festlegen

http://jsfiddle.net/cherrry/dz8uod7u/

zu Stylesheet

Weggehen Animation sieht gut aus, aber wenn das Element eintritt, ist es ein bisschen und die Skalierung Animation Flash seltsam aussieht

es wegen node.scrollHeight die Wiedergabe sofort auftreten verursacht zu fragen sein sollte, so ist es trotzdem die gleichen Informationen zu erhalten und css-Regeln vor dem Start der Animation injizieren? Oder sollte ich anders herum denken?

Ich bin nicht sehr zufrieden mit der max-height Lösung, da die resultierende Animationsgeschwindigkeit sehr seltsam sein, wenn max-height zu nicht in der Nähe ist oder kleiner height und meine Komponenten Höhe tut viel variieren.

Ich konnte die endgültige Lösung vorstellen, ein bisschen chaotisch sein könnte, aber ich denke, es ist in einem Mixin macht schön genug sein wird, es

Answer 1

Ich hatte einfach genug sein, zu transformieren Ein und dasselbe Problem und endete mit dem Schreiben einer eigenständigen Komponente zum Animieren der Höhe.

Sie die Demo hier sehen können: https://stanko.github.io/react-animate-height/

Es ist viel einfacher zu bedienen und ganze Bibliothek ist wirklich klein (~ 200 Zeilen)

<AnimateHeight 
    duration={ 500 } 
    height={ 'auto' } 
> 
    <h1>Your content goes here</h1> 
    <p>Put as many React or HTML components here.</p> 
</AnimateHeight> 

Sorry für die schamlose Eigenwerbung, aber Ich denke, es kann Ihnen viel Zeit ersparen, wenn Sie mehr als eine Komponente animieren müssen.

Prost!

Answer 2

Nach etwas mehr experimentieren überall wieder zu verwenden, habe ich mit einem kommen Lösung durch den Low-Level-API ReactTransitionGroup anstelle von High-Level mit ReactCSSTransitionGroup

Hier ist die JSFiddle mit einer Arbeitslösung: http://jsfiddle.net/cherrry/0wgp34cr/

Vor der Animation, es 3 Dinge tut:

1. bekommen berechnete Höhe, Polsterungen und Margen
2. das Element mit display: none verstecken und füge .anim-enter Höhe auf 0 gesetzt
3. CSS-Regel erstellen für .anim-enter-active

die Animation zu starten, es tut 2 Dinge :

1. sichtbar machen das Element
2. hinzufügen .anim-enter-active die Animation

Einige Zahlen und Klassennamen in JSFiddle wurden hartcodiert zu starten, aber es sollte die „mixin“ in eine Reaktion Klasse als Ersatz von ReactCSSTransitionGroup