で要素の高さをアニメーション化しようとしているReactCSSTransitionGroup
ので、アニメーションを次のようにします。
http://jsfiddle.net/cherry/hgk4Lme9/
問題は、要素の高さを常に知っているとは限らscrollHeight
ないことclientHeight
ですcomponentDidMount
.node.style.height
http://jsfiddle.net/cherry/dz8uod7u/
アニメーションを離れると見栄えがしますが、要素が入ると少し点滅し、スケーリングアニメーションが奇妙に見えます
レンダリングがすぐに行われる原因を尋ねるためであるはずなので、node.scrollHeight
アニメーションが開始する前に同じ情報を取得して css ルールを挿入する方法はありますか? それとも逆に考えるべきでしょうか?
が に近くないか小さくないmax-height
と、結果のアニメーション速度が非常に奇妙になり、コンポーネントの高さが大きく異なるため、このソリューションにはあまり満足していません。max-height
height
最終的な解決策は少し厄介になる可能性があると想像できますが、Mixin にすることで、どこでも再利用できるようになると思います。