1

コンテンツの高さが変化するにつれて、コンテナー要素の高さの変化をアニメーション化したいと思います。私はしようとしています ：

.container {
  height: auto
  background: #eee
  -webkit-transition: height 0.4s ease-in-out;
  -moz-transition: height 0.4s ease-in-out;
  -ms-transition: height 0.4s ease-in-out;
  -o-transition: height 0.4s ease-in-out;
  transition: height 0.4s ease-in-out;
}

次に呼び出します：

$('.container').html('...');

ただし、コンテナーが自動的にスナップするたびに。私が電話した場合：

$('.container').height(400);

アニメーションが発生します。ただし、中身のサイズはわかりません。コンテンツを変更するときにそれをトリガーする方法について何か考えはありますか?

4

2 に答える 2

0

私はトリックを逃している可能性がありますが、私は今夜同じことをしています。

自動高さ（最小高さでも）にアニメートすることはできません。そうしないと、トランジションが中断します。

max-height：0;を使用できます。出発点として。

私を止めた唯一のことは高さの問題でした-幸いなことに私の要素は固定された高さです。

  • 言及するのを忘れました-パーセンテージはアニメーション化するのに問題がないはずです、私は固定数を意味しました。
于 2012-12-06T06:00:06.567 に答える
0

内部コンテンツの高さを計算し、親で height() を使用して明示的に設定することで修正されました。これは機能しますが、ウィンドウのサイズ変更などで高さを再計算する必要があるため、少し面倒です。

于 2012-12-21T19:15:27.403 に答える