div：divを動かすための "height：auto"トリックとは

私は簡単な<ul>プロジェクトのリストを表示するアプリケーションを持っています。ユーザーが新しい「カテゴリー」をクリックすると、プロジェクトのリストを新しいのプロジェクトのリストに置き換えたいと思います。div：divを動かすための "height：auto"トリックとは

私は追加の遷移の提案に開いているが、どのような私が始めたことである -

縮小またはスライドアップと
既存のプロジェクトリストのノードを削除する動的（JavascriptのDOMメソッド）ダウンそれを
ページに新しいリストを取り付け0の高さと、新しいプロジェクトのリストを作成し、展開したりスライド

私はまだネイティブ 'スライドアップ'または 'スライダダウン'メソッドを持たないYahooのYUI3ライブラリを使用していますので、それらをシミュレートしています。高さ= 0を設定するシンプルなアニメーションを実行することで簡単に「スライドアップ」をシミュレートできますが、<ul>リストの最終的な高さはわからないので、「スライダダウン」メソッドをシミュレートするのに問題があります（動的に構築しています）。

高さを適切にしたいと思います - 通常のhtmlと同じように動作します - これは "height：auto"が必要ですが、YUI3はCSSプロパティを高さ：0から高さ：自動。浮動小数点値が必要です。

divを上下にスライドできるjQueryライブラリを見てきましたが、高さの元の値を保存するように見えますが、それは「自動」になります...うまくいかない。たぶん、実際の高さをどこかで最初に計算しているのでしょうか？

誰もがこれを行うための最善の方法を歩くことができますか？リストを作成するときに手動で高さを計算し、そのスタイルをheight：0に設定し、それを計算された高さにアニメーション化し、そのスタイルを高さに設定する必要があります：auto良い状態に残っていますか？もしそうなら、それを行うためのクロスブラウザーの方法は何ですか？目に見えるのオーバーフローでのmin-heightプロパティを設定することについて

おかげで、 -luther

出典

2010-12-05 Luther Baker

何？

出典

2010-12-05 02:29:47

どのように下の要素で再生するのだろうか？プロジェクトリストが200の名前に拡張されるので、それを適切に押さえることはできますか？ –

うん、私はそう信じています...しかし、私はディスプレイを設定します：確かめるブロック –

私はこれがあなたが探しているものだと思います。トリックは2つのネストされたdivを持つことです。外側のものは実際の高さを制御し、内側のものは自然の高さを計算するために使用されます。アニメーションが終了した後、外側のdivは展開されると "auto"に戻り、リスト要素を動的に追加できます。

これは、恥知らずにJQuery blog postから適合させたものです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Animate to Auto</title> 
<style type="text/css"> 
.inner {background:#ccc;height:auto;overflow:hidden;} 
.inner ol{margin:0;} 
.box{height:0px;overflow:hidden;} 
</style> <script type="text/javascript" charset="utf-8" 
     src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"> 
</script> 
</head> 
<body> 
<button class="btn">Toggle Height</button> 
<div class="box"> 
<div class="inner"> 
    <ol> 
    <li>Bashful</li> 
    <li>Doc</li> 
    <li>Dopey</li> 
    <li>Grumpy</li> 
    <li>Happy</li> 
    <li>Sleepy</li> 
    <li>Sneezy</li> 
    </ol> 
</div> 
</div> 
OTHER STUFF HERE 

<script> 
YUI().use('node', 'event', 'anim', function(Y) { 

    var heightAnim = new Y.Anim({ 
     node: Y.one('.box'), 
     to: { 
     height: 0 
     } 
    }); 

    heightAnim.on('end', function (e) { 
     var box = heightAnim.get('node'); 
     if (parseInt(box.getStyle('height')) > 0) { 
     box.setStyle('height', 'auto'); 
     } 
    }); 

    Y.one('.btn').on('click', function(e){ 
     var box = this.get('node'); 
     var inner = box.one('.inner'); 
     var boxH = box.getStyle('height'); 
     if (boxH === 'auto') { 
     box.setStyle('height',inner.getStyle('height')); 
     this.set('to', {height: 0}); 
     this.run(); 
     } else { 
     this.set('to', {height: parseInt(inner.getStyle('height'))}); 
     this.run(); 
     } 
    },heightAnim); 

}); 
</script> 
</body> 
</html>

出典

2010-12-07 18:40:52 mjhm

div：divを動かすための "height：auto"トリックとは

答えて

関連する問題