5

Animate.CSSを使用したアニメーションがあり、ユーザーが希望する場合は再生したいのですが、試したものが機能しません。コードは次のとおりです。

HTML：

    <div class="img-center">
       <img src="path.jpg" class="feature-image animated rotateInDownRight" />
    </div>
       <p class="textcenter">&nbsp;</p>
    <div class="img-center">
       <a href="#" id="replay">Replay</a>
    </div>

JS：

var $j = jQuery.noConflict();
$j("#replay").click(function() {
    $j('.feature-image').removeClass('animated rotateInDownRight').addClass('animated rotateInDownRight');
});

Firebugでスクリプトが発生するのを見ることができるので、スクリプト自体が機能することは知っていますが、そのアニメーションは再びアニメーション化されません。Animate.CSSでこれを達成するにはどうすればよいですか？

4

6 に答える 6

6

これは単なる推測ですが、jQueryは、クラスを追加する前にクラスの削除が「完了」していないようです。これは意味がないことはわかっていますが、JavaScriptの動作方法です。最初の関数が終了する前に、チェーン内の次の関数を呼び出すことができます。Animate.CSSのサイトのコードをざっと見てみると、アニメーション関数でタイムアウトが使用されていることがわかりました。あなたは同じことを試みるかもしれません。コードは次のとおりです。

function testAnim(x) {
    $('#animateTest').removeClass().addClass(x);
    var wait = window.setTimeout( function(){
        $('#animateTest').removeClass()},
        1300
    );
}

これが行っていることは、アニメーションが終了するのを待ってからクラスを削除することを除いて、あなたが行っていることとまったく同じです。そうすれば、他のクラスが再び追加されたときに、それはタグにとって本当に「新しい」ものになります。少し変更された関数は次のとおりです。

function testAnim(elementId, animClasses) {
    $(elementId).addClass(animClasses);
    var wait = window.setTimeout( function(){
        $(elementId).removeClass(animClasses)},
        1300
    );
}

2つのことに注意してください。最初に、このコードを使用すると、アニメーションを取得する要素を変更できます。次に、1300ミリ秒後に追加したクラスを削除します。まだ100％ではありませんが、それはあなたをさらに先へと導くかもしれません。

オブジェクトにすでにいくつかのアニメーションクラスがある場合、このJSを壊す可能性があることに注意してください。

于 2012-09-13T04:05:43.157 に答える
2

animate.css issue#3で正しい答えを見つけました

var $at = $('#animateTest').removeClass();  
//timeout is important !!
setTimeout(function(){ 
   $at.addClass('flash') 
}, 10);

実際には、より単純なバージョンでも JQuery の使用を避けることができます。

el.classList.remove('animated','flash');  
//timeout is important !!
setTimeout(function(){ 
   el.classList.add('animated','flash');
}, 10);
于 2015-08-19T06:47:20.103 に答える
1

ここでの問題は、クラスを削除すると、クラスがすぐに追加されたことだと思います。この問題を解決した方法は次のとおりです。

（HTMLは上記の質問と同じです）。

JS:

var $j = jQuery.noConflict();

window.setTimeout( function(){
   $j('.feature-image').removeClass('animated rotateInDownRight')},
1300);


$j("#replay").click(function() {
    $j('.feature-image').addClass('animated rotateInDownRight');
});

私が信じているのは、jQueryコードがクラスをすばやく削除および追加していることです。このコードが機能する理由に関係なく。

于 2012-09-13T04:09:08.957 に答える
0

私の答えは、色合いの遅延で追加/削除するトリックです:css class

$('#Box').removeClass('animated').hide().delay(1).queue(function() { 
        $(this).addClass('animated').show().dequeue();
});

また、非表示/表示メソッドなしでテストすることもできます:

$('#Box').removeClass('animated').delay(1).queue(function() { 
        $(this).addClass('animated').dequeue();
});

ではスムーズにchrome動作しますが、 では予想外の遅延が発生するFFため、この js タイムアウトをテストできます。

$('#Box').removeClass('animated');  
setTimeout(function(){ 
    $('#Box').addClass('animated');
}, 1);
于 2016-11-06T01:25:12.123 に答える
0

このソリューションは React に依存しておりuseEffect、クラス名を直接操作する必要がないため、かなりクリーンです。

OPの質問（jQueryを使用しているようです）には実際には答えませんが、ReactおよびAnimate CSSライブラリを使用している多くの人にとってはまだ役立つかもしれません.

  const [repeatAnimation, setRepeatAnimation] = useState<boolean>(true);

  /**
   * When the displayedFrom changes, replay the animations of the component.
   * It toggles the CSS classes injected in the component to force replaying the animations.
   * Uses a short timeout that isn't noticeable to the human eye, but is necessary for the toggle to work properly.
   */
  useEffect(() => {
    setRepeatAnimation(false);
    setTimeout(() => setRepeatAnimation(true), 100);
  }, [displayedFrom]);

  return (
    <div
      className={classnames('block-picker-menu', {
        'animate__animated': repeatAnimation,
        'animate__pulse': repeatAnimation,
      })}
  ...
  )
于 2021-02-09T15:40:06.767 に答える