3

アニメーション: http://codepen.io/leongaban/pen/wJAip

ここに画像の説明を入力

Animate Downボタンをクリックすると、jQuery は.animateDownクラスをスピナーに追加します。スピナーは 0 までアニメートされますが、再びフルサイズに戻ります。

CSS の最後に新しいキーフレームを追加して、縮小後にスピナーを非表示にするにはどうすればよいでしょうか?

または

jQuery では、スピナーが 0 に縮小されてから hide() されたときにリッスンしますか?


CSS:

.animateDown {
    -webkit-animation: animateDown .3s ease-in-out;
    animation: animateDown .3s ease-in-out;
}

@-webkit-keyframes animateDown { 
    0%  {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% { 
       -webkit-transform: scale(0);
       transform: scale(0);
    }
}

jQuery:

$('#animate-down').unbind('click').bind('click', function() {
    $('#spinner').removeClass('animateUp');
    $('#spinner').addClass('animateDown');
});
4

3 に答える 3

1

また、純粋な CSS ソリューションについては、animation-fill-mode をご覧ください。

あなたの場合：animation-fill-mode: forwards;

唯一の問題は、ブラウザ間の互換性です。

于 2013-09-25T23:20:47.713 に答える
1

私が問題を正しく理解している場合は、css アニメーションにコールバックをアタッチする必要があります。このようなもの。

$(".animateDown").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

ここで見られるように

編集: 純粋な JS バージョンもありますが、私は自分の jQuery が好きです :)。

于 2013-09-25T23:21:50.537 に答える
1

このような？http://codepen.io/anon/pen/sypjf

CSS アニメーションが繰り返されないように、「forwards」を使用できます。

.animateUp {
  -webkit-animation: animateUp .6s ease-in-out forwards;
  animation: animateUp .6s ease-in-out forwards;
}
.animateDown {
  -webkit-animation: animateDown .3s ease-in-out forwards;
  animation: animateDown .3s ease-in-out forwards;
}

opacity: 0 をキーフレームに追加して、要素が非表示になるようにします ($.hide() とはまったく同じではありません)。

@-webkit-keyframes animateDown { 
0%  {
  -webkit-transform: scale(1);
  transform: scale(1);

  }
100% { 
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  }
}

また、-moz プレフィックスを追加することを忘れないでください。現在、デモは Firefox では動作しません。

于 2013-09-25T22:56:10.023 に答える