私はng-showとng-hideを論理条件に基づいて要素を表示および非表示にすることを可能にするAngularJSを使用しています。私が達成しようとしているのは、子オブジェクトが表示されているときにコンテナーのサイズ変更をアニメートすることです。CSSを使用して動的な高さをアニメーション化することはできますか？ JSの代替案が受け入れられる
AngularJSに精通していないものについて
、ng-showとng-hideは、基本的にはただdisplay: noneとdisplay: block特性を適用しました。したがって、コンテナがshowに設定されている場合、ディスプレイはblockに設定されます。
Google検索のいくつかのページで高さの変化をアニメーション化することについては読んでいますが、私が見つけることができるのはmax-heightを使用して1つの高さから別の高さにアニメーション化する例です。例えばCSSルールは、：
#animated-div {
max-height: 100px;
transition: max-height 1s ease;
}
#animated-div.hidden {
max-height: 0px;
}
、彼らは高さの変化をアニメーション化への移行を引き起こすために.hiddenクラスを削除します。
問題は、コンテナを開閉するつもりはなく、さまざまな変数に基づいてコンテナを動的に変更できるため、コンテナの高さは決まっていません。アプリケーションの応答性が高いので、高さはデバイスによって異なります。ここ
は、例のシナリオである：
- Container
- Div A (Height: 200px); Shown
- Div B (Height: 100px); Shown
- Div C (Height: 300px); Hidden
- Div Slider (Height: Dynamic) Hidden.
現在（autoある）容器の高さは、子供に基づい300pxあり、今やユーザは600pxに高さが増加する、本部Cがアクティブトグルdivは300px -> 600pxから展開をアニメーションする必要があります。ユーザーはclearボタンをクリックし、コンテナの子はすべて非表示になり、コンテナは600px -> 0pxからアニメーション化されます。
ユーザは、0 to 100の範囲の値を持つスライダーを使い始めます。この高さはDiv Sliderに適用されます。ユーザーが57にスライドしたとします。0px -> 57pxのアニメーションが表示されるはずです。
申し訳ありませんが、私が欲しいものの詳細な例がありますが、それを説明するために考えられる唯一の方法です。参考までに、コンテナ内の子は、%の値とvw/vhの値を使用して動的にスケーリングされます。特定の子の組み合わせがアクティブなときのコンテナのサイズは、異なる解像度では決して同じではないため、動的な高さの変化をアニメートできる必要があります。
このプロジェクトでは、追加のライブラリは必要ありません.Javascriptの例は、最新のモバイルブラウザでも動作する必要があります。