1

我想要将旋转动画应用于 div，它会不断重复，直到我希望它停止。

我向我的 div 添加了包含动画参数的类“旋转”，然后使用 el.removeClass('spinning') 从 div 中删除了类“旋转”

动画有效，一旦我在 Chrome 和 Safari 中删除类，动画就会停止。但是在我的 Android 测试设备（4.0.1）上，动画不会停止，并且会在删除动画类时不断重复。

这是“旋转”类的代码和我的动画的其余部分：

    .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

这解决了我的（非常相似的）问题：

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

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

请参阅在 Android 浏览器中难以停止无限的 CSS 动画。

于 2012-10-25T08:39:23.287 回答