25

で要素の高さをアニメーション化しようとしているReactCSSTransitionGroupので、アニメーションを次のようにします。

http://jsfiddle.net/cherry/hgk4Lme9/

問題は、要素の高さを常に知っているとは限らscrollHeightないことclientHeightですcomponentDidMount.node.style.height

http://jsfiddle.net/cherry/dz8uod7u/

アニメーションを離れると見栄えがしますが、要素が入ると少し点滅し、スケーリングアニメーションが奇妙に見えます

レンダリングがすぐに行われる原因を尋ねるためであるはずなので、node.scrollHeightアニメーションが開始する前に同じ情報を取得して css ルールを挿入する方法はありますか? それとも逆に考えるべきでしょうか?

が に近くないか小さくないmax-heightと、結果のアニメーション速度が非常に奇妙になり、コンポーネントの高さが大きく異なるため、このソリューションにはあまり満足していません。max-heightheight

最終的な解決策は少し厄介になる可能性があると想像できますが、Mixin にすることで、どこでも再利用できるようになると思います。

4

4 に答える 4