web-dev-qa-db-ja.com

webkit-コンテンツに基づいて高さが動的に変化するdivの遷移の高さ？

次のjsFiddleを参照してください

http://jsfiddle.net/SgyEW/10/

ボックスを拡大/縮小させるさまざまな長さのコンテンツを表示するさまざまなボタンをクリックできます。

高さの変化をアニメーション化して、それほどジャンプしないようにしたいので、次を追加してこれを試しました。

-webkit-transition: all 1s linear;

しかし、このユースケースでは効果はありません。 JavaScriptを必要としないソリューションに関するアイデアはありますか？

ありがとう

csswebkittransitions
17
TheExit

Javascriptの支援なしに、CSS3トランジションで高さをアニメーション化する方法はないのではないかと思います。チェックしてください。

高さ：0;から高さ：自動; CSSを使用して移行するにはどうすればよいですか？

CSS3を使用してheight：0からコンテンツの可変高さに移行できますか？

さらに、コードはdisplay：noneからdisplay：blockになります。これは、どのような場合でも高さに影響を与えません。表示の代わりに、高さ：0、オーバーフロー：非表示を使用します。

6
methodofaction

8年が経ちましたが、この要求に対する解決策を探している人のために：

JSフィドル

CSS

#box {
border: 1px solid gray;
background-color: #f3f3f3;
-webkit-transition: all 1s linear;
}

.content {display:none}

.new_content {
  transition: 1s;
}

JS

$('.toggler').on('click', function() {

var idname = $(this).attr('name');
var content = $('#' + idname).html();
var content_height = $('#' + idname).height();
$('.new_content').html(content).css("height", content_height);

});

また、何が変更されたか：

  • 基になっているメソッドとして「display：none」と「display：block」を使用しなくなりました。 静的に表示されたdivのコンテンツ置換を使用することをお勧めします
  • Content div（ '。new_content'）には高さがなく、オプションです。
  • JSは、非表示のdivに基づいて高さを設定します。
  • 移行がその役割を果たします。

それが役に立てば幸い。

1
YArea