2

私は CSS/HTML/JS を初めて使用するので、CSS トランジションの経験があまりありません。

ページの div 要素をアニメーション化しようとしていますが、今のところ望ましい結果が得られません。

これが私の問題です：

私の HTML には、内部に 5 つの div 要素を持つ div コンテナー要素があります。それらは画面の中央に配置された単純なボックスのように見え、今のところ表示されません。また、画面の隅に 5 つのボタンがあります。

私がやろうとしていることは次のとおりです。

ボタン (ボタン 3 など) をクリックすると、左側の 3 つの div が消えて画面の余白の後ろの左に移動し、2 つの div が同じように移動する必要がありますが、右に移動します。その後、右側の 3 つの div を画面に戻し、右側の 2 つの div もスライドして戻す必要があります。そのため、最初に開始した位置まで、お互いに向かってスライドしているように見えます。

CSS トランジション (transform: translateX(Npx);) を使用してこの効果を実行しようとしています。したがって、私のJSファイルには次のようなものがあります。

$(document).ready(function() {

    $(".button").click(function(){

    // PART 1
       // move 3 divs to the left using transform: translateX(Npx) (no animation)
       // move 2 divs to the left using transform: translateX(Npx) (no animation)

    // PART 2
       // slide 3 divs to the left using transform: translateX(Npx) (with animation)
       // slide 2 divs to the left using transform: translateX(Npx) (with animation)

    });

したがって、問題は、この場合、パート 1 のみが機能し、パート 2 が機能していないように見えることです..コード上のパートを別のイベントに添付すると...別のクリックボタンのように.大丈夫。

私の質問は、これら 2 つの遷移が 1 つのイベントで実行できるかどうかです?!?!

4

1 に答える 1

1

私はこれを行いましたが、この種の効果は見栄えがします。あなたの質問を正しく理解していれば、あなたの問題は、div を移動した後にアニメーションを実行することです。そのため、アニメーション関数は間違った開始点を使用します。

必要なものは次のとおりです。

  1. CSS position:relative; があることを確認してください。アニメーションが機能するように、div に設定します。
  2. div を現在の位置 (つまり、上、左) に対して相対的に移動するアニメーション関数を実行し、成功のコールバックを含めます。移動距離を計算するには、最初に offset() といくつかの計算を使用する必要がある場合があります。
  3. アニメーションの完了時 (成功のコールバック)、div の相対位置を 0px (または以前のもの) に戻し、同時に、insertBefore() を使用して DOM 内の新しい位置に実際に div を移動する関数を実行します。 . これらの関数はほぼ即時であるため、ちらつきは見たことがありませんが、問題が発生した場合は、位置をリセットして div を移動している間に可視性を非表示に設定し、後で可視性をリセットできます。

成功のコールバックでリセットするアニメーション中に div のカスタム z-index を設定することもできます。これにより、div が上/下を通過する要素を決定したり、互いに交差する場合に上にある要素を指定したりできます。

于 2013-01-16T18:27:49.743 に答える