Jak animować wysokość elementu w React with ReactCSSTransitionGroup?

Question

Próbuję animowanie wysokość elementu z ReactCSSTransitionGroup, więc to co chciałbym animacja wygląda następująco:

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

Problem polega na tym, że nie zawsze wiedzą, wysokość elementu tak próbowałem hack scrollHeight, clientHeight lub coś podobnego podczas componentDidMount i spróbuj ustawić node.style.height lub dodać reguły na stylesheet

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

Pozostawienie animacja wygląda dobrze, jednak kiedy elementem wchodzi, to migać nieco i animacja skalowanie wygląda dziwnie

Należy powodu pytaniem node.scrollHeight spowodował renderowania nastąpić natychmiast, więc czy jest tak, aby uzyskać te same informacje i wstrzyknąć reguły css przed rozpoczęciem animacji? Czy powinienem myśleć w inny sposób?

nie jestem bardzo zadowolony z rozwiązania max-height, a uzyskaną prędkość animacji będzie bardzo dziwne, kiedy max-height nie jest blisko do height lub mniejszy, a wysokość moich komponenty różnią się wiele.

mogłem wyobrazić ostateczne rozwiązanie może być nieco niechlujny, ale myślę, czyniąc go w mixin będzie na tyle miły, aby używać go w dowolnym miejscu

Answer 1

miałem Ten sam problem zakończył się pisaniem samodzielnego komponentu do animowania wysokości.

można zobaczyć demo tutaj: https://stanko.github.io/react-animate-height/

Jest o wiele łatwiejsze w użyciu, a cała biblioteka jest bardzo małe (~ 200 linii)

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

Przepraszamy za bezwstydne autopromocji, ale Myślę, że może zaoszczędzić ci dużo czasu, jeśli masz więcej niż jeden komponent do animacji.

Pozdrawiam!

Answer 2

Po nieco więcej doświadczenia, mam wymyślić rozwiązanie za pomocą API niskiego poziomu ReactTransitionGroup zamiast wysokim poziomie ReactCSSTransitionGroup

Oto JSFiddle z roztworu roboczego: http://jsfiddle.net/cherrry/0wgp34cr/

Przed animacji, to robi 3 rzeczy:

1. uzyskać wysokość kalkulowana, Uszczelki i marże
2. ukryć element z display: none i dodać .anim-enter ustawić wysokość do 0
3. utworzyć regułę CSS dla .anim-enter-active

Aby uruchomić animację, to robi 2 rzeczy :

1. unhide element
2. dodać .anim-enter-active aby uruchomić animację

Niektóre numery i klasa nazwa JSFiddle zostały zakodowane, ale powinno być dość łatwe do przekształcenia „wstawek” w klasie React jako zamiennik ReactCSSTransitionGroup