6

非常に優れたトランジションを持つ CSS3 メニューを 1 つ見ました。

transition: all 0.3s ease 0.1s;

テーブルに同じトランジションを適用したいと考えています。テーブルの行をクリックすると、クリックした行の後に新しい行が追加され、表示または非表示になるテーブルがあります。

以下のコードのように (clickedTableRow には、クリックされた行の jQuery セレクターの値があります):

clickedTableRow.after('<tr style="display:none;"><td>some content</td></tr>');
clickedTableRow.next().slideDown(3000);

slideDown上記のcssトランジションを新しく追加されたテーブル行に適用する方法の代わりに、同等のJavaScriptがありますか?

質問の更新:

たぶん私は言い換える必要があります。新しく作成されたコンテンツをゆっくりとスライドさせる最良の方法は何ですか?

のようです：

clickedTableRow.after('<tr><td>some content</td></tr>').slideDown(3000);

以下と同じように見えます:

clickedTableRow.after('<tr><td>some content</td></tr>');

slideDown 効果がなければ、ここで何が欠けていますか?

4

5 に答える 5

5

したがって、上記のソリューションでは、jquery animate ライブラリを使用してこれを行います。これは、css3 を使用して行うこともできます。

私は派手な動作のためにコードを微調整していません。アイデアが明確であることを願っています:

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Slide Add Row</title>
</head>
<body>
<table>
    <tr><td>some content</td></tr>
</table>
</body>
</html>

CSS:

   div {
      -moz-animation-duration: 1s;
      -webkit-animation-duration: 1s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
    position:relative;
    }

    @-moz-keyframes slidein {
      from {
            top:-20px;
      }

      to {
            top:0px;
      }
    }

    @-webkit-keyframes slidein {
      from {
            top:-20px;
      }

      to {
            top:0px;
      }
    }

および JS (行を動的に追加する場合のみ:

$('table').on('click', function(){
  $tbody = $(this).find('tbody:last');
   $tbody.after('<tr><td><div>new</div></td></tr>');
});

ライブデモ:

http://jsbin.com/unacog/9/

注意点：

  1. TD 内のデータはラップする必要があります。そうしないと、CSS3 animate の既存の実装が機能しません。

  2. もちろん、IE ブラウザはサポートされていません。Chrome、FireFox、および Safari で動作します。

ところで-cssアニメーションを使用すると、たとえば、フォントサイズに基づいて、アニメーションを操作する他の多くの方法に自由が与えられます: http://jsbin.com/unacog/11/

于 2012-10-19T21:09:23.657 に答える
2

のようなスタイルシートにCSSを追加します

.transition{
  transition: all 0.3s ease 0.1s;
   }

それから

clickedTableRow.next().addClass('transition');
于 2012-10-15T11:10:39.053 に答える
2

「新しく作成されたコンテンツをゆっくりとスライドさせる最良の方法は何ですか?」

最初はコンテンツを非表示にするコンテナー内にコンテンツを配置します。次にslideDown、親が新しく追加された子を明らかにします。

これはテーブルの行 ( <tr>) では非常に難しくなります。なぜなら、テーブルは と同じタイプのブロックレベル要素では<div>, <span>, <p>, etc.ないからです。（このSOの質問でかなりよく説明されています）

したがって、私であれば、テーブルとセルを厳密にセマンティックにし、行を非表示にできる何かでテーブルをラップします (テーブルの使用を余儀なくされた場合):

http://jsfiddle.net/25uQr/ (はい、時間をかけすぎました)

あなたがあなたの投稿で説明したことについて、私は<ul>,<ol>, or <dl>. それらの子はテーブルの行のように動作しますが、ブロックレベルの要素です...そのため、操作は非常に簡単で、クロスブラウザーで安全です。

于 2012-10-25T19:52:58.880 に答える
1

http://jsfiddle.net/xMRhE/4/

$itemBeingAdded = $("<div class='inner start-animation'></div>");    
    $testTable.append($itemBeingAdded);
    setTimeout(function () {
        $itemBeingAdded.removeClass("start-animation");
    }, 100);

CSS スライド効果:

.inner {
   height : 50px;
   -moz-transition: all 0.3s ease 0.1s;
   -webkit-transition: all 0.3s ease 0.1s;
   transition: all 0.3s ease 0.1s;
   background : #ded;
   border : 1px solid #999;
}

.inner.start-animation {
     height : 0px;
}​

これが私のアプローチです。下にスライドする代わりに、通常の高さの 0 から 100% まで高さをアニメートするだけです。

これは、テーブルの行、要素、div、またはその基本クラスと、アニメーションの初期状態 (またはキーフレーム) のスタイルを追加する「開始」クラスを追加することによって行われます。要素を dom に追加した直後に、開始キーフレーム クラスを削除します。

次に、ブラウザは、その時点で実際に影響を与えるプロパティによって定義された次の「フレーム」のように要素を見せるためにアニメーション化する必要があるものを計算します。

于 2012-10-25T08:00:10.433 に答える
1

私が質問を正しく理解している場合、テーブルにコンテンツを動的に追加していて (ajax を介して?)、テーブルの下部にポップアップするだけでなく、スライドさせたいですか?

あなたが欠けているのは次のhide()とおりです：

clickedTableRow.after('<tr><td>some content</td></tr>').hide().slideDown(3000);

.slideDown(speed)は の代替です.show(speed)が、いずれかを機能させるには、CSS ( display:none) を使用するか、.hide(speed)それを ing して、要素を非表示にする必要があります。

[編集]

表の行は、ブラウザが表示可能な表示プロパティに異なる値 (表の行とブロック) を使用するため、アニメーションに特定の障害をもたらします。アニメーションなしの .hide() および .show() メソッドは、テーブル行で常に安全に使用できます。jQuery バージョン 1.1.3 では、.fadeIn() と .fadeOut() も使用できます。

修正するには、コンテンツを div でラップして表示する必要があります。私はjsFiddleを作成しました:

http://jsfiddle.net/VXe6r/

于 2012-10-19T09:20:12.947 に答える