Повторите анимацию CSS один раз с JavaScript - PullRequest
Новая
       1

Повторите анимацию CSS один раз с JavaScript

1 голос
/ 08 декабря 2011

Почему я не могу повторить CSS-анимацию с javascript один раз?

Fiddle: http://jsfiddle.net/6XtSa/

Ответы [ 3 ]

5 голосов
/ 08 декабря 2011

Вот пример, адаптированный из удаленного ответа, в котором предлагается использовать классы.Этот ответ не совсем правильно понял анимацию, потому что он работал бесконечно.

Идея состоит в том, чтобы добавить класс на click и удалить его при возникновении события animationend: 

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

#button.animating {  
    -webkit-animation-name: rotate;  
    -webkit-animation-timing-function: linear;  
    -webkit-animation-duration: 1s; 
}

var btn = document.getElementById('button');

btn.addEventListener('click', function() {
    this.className = 'animating';
});
btn.addEventListener('webkitAnimationEnd', function(){
    this.className = '';
});

http://jsfiddle.net/AndyE/9LYAT/

0 голосов
/ 08 декабря 2011

Вы можете попробовать что-то вроде этого: http://jsfiddle.net/6tZd3/

Согласно Руководству по визуальным эффектам CSS Safari вы можете просто прослушать событие webkitTranstionEnd, чтобы получить уведомление о завершении анимации,В этот момент вы можете сбросить анимацию без анимации с помощью JavaScript.

0 голосов
/ 08 декабря 2011

Причина, по которой кнопка вращается только один раз, заключается в том, что она вращается от до и не на 360 °.Это абсолютная ценность.Чтобы снова повернуть, вам нужно повернуть от 360 ° до 720 °.Возможно, вы захотите взглянуть на этот пост: Вращение элемента Div в jQuery и, в частности, это jsfiddle в одном из ответов: http://jsfiddle.net/uLrVy/

...