在安卓4.0.1上删除动画时，CSS3 translate3d会连续重复

Question

我想要一个旋转的动画应用于div，它会不断重复，直到我想让它停止为止。

我添加了‘then’类，它包含动画参数到我的div，然后用el.removeClass(‘then’)从div中删除了‘then’类。

动画开始工作，一旦我在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.

Answer 1

我不知道你的CSS，但我有同样的问题-我的解决方案是从我的容器元素中删除overflow: hidden；。仅当容器具有已设置动画的子项时才会出现问题。

参见Difficult to stop infinite CSS animation in Android browser。

Answer 2

这解决了我(非常类似)的问题：

$el.removeClass('THE_ANIMATION').css('opacity', 0.99);
window.setTimeout(function () {
  $el.css('opacity', 1); 
}, 0);