javascript - 使用 jQuery 单击另一个 div 时“缓出”无限 CSS 旋转动画

Question

我正在尝试使用 jquery 在单击另一个 div 时将不断旋转的 div（使用 CSS 动画）缓慢、平滑地停止。

我一直在尝试将“animation-timing-function”属性从“linear”更改为“ease-out”，但它只是突然停止，而不是我想要的缓慢停止。

HTML

<div id=click>Click me</div>
<div id=spinner></div>

jQuery

$(function () {
$("#click").click(

function () {
    document.getElementById("spinner").style['-moz-animation-iteration-count'] = '1';
    document.getElementById("spinner").style['-moz-animation-timing-function'] = 'ease-out';
    document.getElementById("spinner").style['-webkit-animation-iteration-count'] = '1';
    document.getElementById("spinner").style['-webkit-animation-timing-function'] = 'ease-out';
    document.getElementById("spinner").style['animation-iteration-count'] = '1';
    document.getElementById("spinner").style['animation-timing-function'] = 'ease-out';

});
});

CSS

#spinner {
width:50px;
height:50px;
margin:20px;
background-color:red;

animation:spin-constant 5s;
-webkit-animation-name: spin-constant;
-webkit-animation-duration: 1200ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin-constant;
-moz-animation-duration: 1200ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: spin-constant;
animation-duration: 1200ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-moz-keyframes spin-constant {
from {
    -moz-transform: rotate(0deg);
}
to {
    -moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin-constant {
from {
    -webkit-transform: rotate(0deg);
}
to {
    -webkit-transform: rotate(360deg);
}
}
@keyframes spin-constant {
from {
    transform:rotate(0deg);
}
to {
    transform:rotate(36 0deg);
}
}

这是基本概念的小提琴。 http://jsfiddle.net/jN5vw/1/

Answer 1

试试这个：

看演示

jQuery：

$('#click').click(function () {

    $("#spinner").removeClass('spinner');
    $("#spinner").addClass('anim');
});

CSS：

.anim{
    width:50px;
    height:50px;
    margin:20px;
    background-color:red;
    animation:spin 5s ;
    -webkit-animation: spin 1s linear;
    -webkit-animation-iteration-count:1;
}

我想这就是你要问的。