добавить и удалить тот же класс CSS мгновенно

Question

У меня есть простой HTML с div и button. Также у меня есть класс CSS с переходом CSS3:

.animate
{
    -webkit-animation-name: animation;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-iteration-count: 2;   
}

Я хочу запустить анимацию, нажав кнопку. Итак, я написал скрипт, который мгновенно удаляет и снова добавляет .animate класс в div, но, к сожалению, он не работает. Проверьте это:

("#button").click(function(){ 
    startAnimation(); 
    });

    function startAnimation()
    {
        if ($("#test-div").hasClass('animate')==true)
        {
            $("#test-div").removeClass('animate');  
            startAnimation();
        }
        else
        {
            $("#test-div").addClass('animate'); 
        }   
    }

Почему jquery не может удалить и сразу добавить тот же класс? Как я могу это исправить?

А может, есть другой способ запустить переход css3, щелкнув любой селектор?

Спасибо.

UPD. Загружаю скрипт на jsfiddle.net / PfzZN / 1 /

Answer 1

Если скрипт, который вносит изменения в DOM, находится в том же потоке, по какой-то причине изменение не будет применено, пока поток не будет завершен. Таким образом, по-вашему, браузер увидит, как будто ничего не произошло, потому что класс «animate» удален и добавлен в тот же поток.

В качестве обходного пути, это будет достаточно хорошо?

function startAnimation()
{  
    $("#flash-message").removeClass('animate');  
    setTimeout(function(){
      $("#flash-message").addClass('animate')
    },1);  
}

Answer 2

Вы также можете использовать JS для прослушивания анимационных событий.Это сложно, но лучше, чем произвольные таймауты и т. Д., Которые могут не иметь никакого отношения к вашей анимации в будущем.Проверьте это:

http://www.w3.org/TR/css3-animations/#animation-events-

Answer 3

(Мой первоначальный ответ был "удален" посредством редактирования, потому что он был просто неверным.)

Это похоже на допустимую ошибку в реализации Webkit или, по крайней мере, что-то очень неожиданное.Потому что, если вы делаете setTimeout, например, так:

function startAnimation()
{
    $("#flash-message").toggleClass('animate');    
    if (!$("#flash-message").hasClass('animate'))
    {
        setTimeout(function ()
        {
            $("#flash-message").addClass('animate');    
        }, 1);
    }
}

Тогда это работает.То есть, отсрочка добавления класса на более поздний срок, кажется, заставляет Webkit понять, что он должен перезапустить анимацию.

Не очень хорошее решение, но тот факт, что это была 1 миллисекунда setTimeout, означаетпо крайней мере, это не проблема времени ... хотя и довольно странная.