2

プロジェクトの単純な <ul> リストを表示するアプリケーションがあります。ユーザーが新しい「カテゴリ」をクリックすると、プロジェクトのリストを新しいプロジェクトのリストに置き換えたいと思います。

私は追加の移行提案を受け入れますが、私が始めたのは -

  1. 既存のプロジェクト リスト ノードを縮小または上にスライドして削除する
  2. 動的に (Javascript DOM メソッド) 高さ 0 の新しいプロジェクト リストを作成します。
  3. 新しいリストをページに添付し、展開または下にスライドします

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

高さを適切にしたい-つまり、通常のhtmlと同じように動作する-つまり、「height:auto」が必要です...しかし、YUI3はCSSプロパティをheight:0からheight:autoにアニメーション化/遷移できません。float 値が必要です。

div を上下にスライドさせることができ (jQuery)、高さの元の値を単純に保存するように見える Javascript ライブラリをいくつか見てきましたが、それは「自動」になります...これは機能しません。たぶん、最初に何らかの方法で実際の高さを計算していますか？

誰でもこれを行うための最良の方法を歩むことができますか? リストを作成するときに手動で高さを計算する必要がありますか...そしてそのスタイルをheight:0に設定し、計算された高さにアニメーション化してから、スタイルをheight:autoに設定して、良い状態のまま？もしそうなら、それを行うクロスブラウザの方法は何ですか?

ありがとう - ルター

4

2 に答える 2

1

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

これは、 JQuery のブログ投稿から恥知らずに改作されたものです。

<!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-07T18:40:52.193 に答える
0

オーバーフローを表示する min-height プロパティを設定するのはどうですか?

于 2010-12-05T02:29:47.780 に答える