javascript - 如何在 Android 浏览器中停止 CSS3 动画？

Question

我有一个旋转的 div:

<div class="medium animated"></div>

.medium {
position: absolute;
width: 100px;
height: 100px;
}

.animated {
animation: spin 5s linear infinite;
}

@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

我希望它在我点击它时停止。我添加 animation-play-state: paused在 onClick 事件监听器中，它在除 iOS 和 Android 浏览器之外的任何地方都运行良好

所以，好吧，我只想在那些浏览器中点击时停止动画，而不是暂停。所以我删除了 animated来自 DIV 的类(class).它适用于 iOS，但不适用于 Android 浏览器。 DIV继续旋转。

如何停止 Android 浏览器中的动画？

这里是 jsfiddle举个例子

Answer 1

检查一下 — http://jsfiddle.net/sergdenisov/hpvqfut5/4/ .

$('.js-start-stop').on('click', function() {
    $('.js-circle').toggleClass('circle_animated');
});

$('.js-continue-pause').on('click', function() {
    $('.js-circle').toggleClass('circle_paused');
});

.circle {
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 20px;
}

    .circle__sector {
        float: left;
        width: 10%;
        height: 100%;
        background: yellow;
    }

    .circle_animated {
        -webkit-animation: spin 5s linear infinite;
        animation: spin 5s linear infinite;
    }

    .circle_paused {
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
    }

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }    
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="circle circle_animated js-circle">
    <div class="circle__sector"></div>
</div>
<button class="js-start-stop" type="button">Start/Stop</button>
<button class="js-continue-pause" type="button">Continue/Pause</button>

我在 Android 浏览器 4.1.2 和 iOS Safari 8.3 上测试过，可以这样说:

1. animation-play-state: paused 似乎是浏览器错误，因为 CSS 属性确实应用于 iOS Safari(我认为在 Android 上也是类似的)。我认为你无能为力。

2. 按钮 Start/Stop(动画)运行良好。