«Ослабление» бесконечной анимации вращения CSS при нажатии другого div с помощью jQuery

Я пытаюсь использовать jquery для приведения постоянно вращающегося div (используя анимацию CSS) к медленной, плавной остановке при нажатии другого div.«Ослабление» бесконечной анимации вращения CSS при нажатии другого div с помощью jQuery

Я пытаюсь изменить свойство «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/

источник

2013-05-28 Alexander Lexington

За исключением того, как вы вызываете элемент #click, это не jQuery. Не знаете, каков ваш вопрос? –

Это довольно грязно, я совершенно новичок в мире веб-разработки. Я предполагаю, что я просто спрашиваю, как выполнить свою цель, используя некоторую комбинацию CSS и JS/JQuery. –

Это будет сложно, так как вы анимируете его с помощью чисто CSS. Если это было сделано с помощью цикла JavaScript, вы могли бы медленно уменьшить значение вращения, но с помощью CSS я не уверен. Я знаю, что есть метод jQuery для 'addClass' и' removeClass' с медленной задержкой перехода между старым и новым классами, но для определения того, какое значение приводит к плавной остановке, потребуется некоторое время. Я подозреваю, что вы захотите изменить продолжительность анимации на более высокие и более высокие значения ms в течение как минимум пары секунд, и по мере приближения к концу отсчета измените ваш счетчик итераций на 1 из бесконечного. –

Попробуйте это:

See Demo

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; 
}

Я думаю, что это то, о чем вы просите.

источник

2013-05-28 05:42:55

Все еще выглядит довольно «негладкой» для меня. –

Да, это негласно, так как пользователь может щелкнуть в случайном состоянии вращения, но «легкость» начнется с предопределенного состояния вращения :( – socketpair

«Ослабление» бесконечной анимации вращения CSS при нажатии другого div с помощью jQuery

ответ

Смежные вопросы