1

回転するアニメーションをdivに適用したいのですが、停止するまで継続的に繰り返されます。

アニメーションパラメータを含むクラス'spinning'をdivに追加し、el.removeClass（'spinning'）を使用してクラス'spinning'をdivから削除しました。

アニメーションは機能し、ChromeとSafariでクラスを削除すると停止します。しかし、私のAndroidテストデバイス（4.0.1）では、アニメーションが停止せず、アニメーションクラスを削除すると継続的に繰り返されます。

クラス「spinning」と残りのアニメーションのコードは次のとおりです。

    .spinning {
      @include animate-spinning;
    }

    @mixin animate-spinning {

    // Experimental mixin from Compass - see footnote below **
      @include experimental(animation-name, spinning-animation);
      @include experimental(animation-duration, 2s);
        @include experimental(animation-timing-function, linear);
        @include experimental(animation-iteration-count, infinite);
    }

    @-webkit-keyframes spinning-animation {
      0% {-webkit-transform: translate3d(0,-2432px,0);}
      100% {-webkit-transform: translate3d(0,0,0);}
    }


    ** Experimental mixin
    // This mixin provides basic support for CSS3 properties and
    // their corresponding experimental CSS2 properties when the
    // implementations are identical except for the property prefix.
4

2 に答える 2

0

あなたのCSSはわかりませんが、同じ問題がありました。私の解決策は、オーバーフローを削除することでした。私のコンテナ要素から。この問題は、コンテナにアニメーション化された子がある場合にのみ発生しました。

Androidブラウザで無限のCSSアニメーションを停止するのが難しいを参照してください。

于 2012-10-25T08:39:23.287 に答える
0

これは私の（非常に似た）問題を解決します：

$el.removeClass('THE_ANIMATION').css('opacity', 0.99);
window.setTimeout(function () {
  $el.css('opacity', 1); 
}, 0);
于 2014-06-09T12:47:34.377 に答える