cssのアニメーション

Question

初歩的な質問で申し訳ありません。
下記の様なサンプルを考えております。

サンプル

ボタンを押すとdivの高さがアニメーションで変わるというものです。
cssのtransitionを用いて、丁度テキストの行数に合わせて高さが変わります。

その時なのですが、テキストの高さに合わせようとすると

height: auto;

にしなければならないのですが、autoを設定した場合は、アニメーションが機能しません。
具体的な数値を設定しないと、機能しないようです。
ですが、行数に合わせようとするとautoにしなければならず、どうしたものかと考えております。

何か良い考えはございますでしょうか。

Comments

[hoshi-takanori]

こちら参考になるかも。
https://qiita.com/harada-k/items/30c01e473d2e417121f5

[uer03108]

有難うございます。
色々な方法があるんですね。
参考になりましたm(_ _)m

Answer 1

  $(document).on('click', '#idAuto', function(){
    var h1=$('#idBox').height();
    var h2=$('#idBox').height("auto").height();
    $('#idBox').height(h1).height(h2);
  });

Comments

[uer03108]

有難うございます。
理解できました。
　１．現在の高さを取得
　２．高さをautoに設定して、その高さを取得
　３．高さを元に戻して、autoの「数値の」高さに設定

スマートですね。。。
勉強になりますm(_ _)m