jquery：addClass，removeClass：動畫只有一次：爲什麼？

Question

當我使用：

$("#passwordConfig").removeClass('shake animated').addClass('shake animate'); 

這隻有一次。

我需要添加一些timeOut使其運行儘可能多的次數，我想！

$("#passwordConfig").removeClass('shake animated'); 
        setTimeout(function() { 
         $("#passwordConfig").addClass('shake animated'); 
        }, 50); 

任何想法爲什麼？

CSS：

.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 

@-webkit-keyframes shake { 
    0%, 100% { 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    } 

    10%, 30%, 50%, 70%, 90% { 
    -webkit-transform: translate3d(-10px, 0, 0); 
    transform: translate3d(-10px, 0, 0); 
    } 

    20%, 40%, 60%, 80% { 
    -webkit-transform: translate3d(10px, 0, 0); 
    transform: translate3d(10px, 0, 0); 
    } 
} 

@keyframes shake { 
    0%, 100% { 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    } 

    10%, 30%, 50%, 70%, 90% { 
    -webkit-transform: translate3d(-10px, 0, 0); 
    transform: translate3d(-10px, 0, 0); 
    } 

    20%, 40%, 60%, 80% { 
    -webkit-transform: translate3d(10px, 0, 0); 
    transform: translate3d(10px, 0, 0); 
    } 
} 

.shake { 
    -webkit-animation-name: shake; 
    animation-name: shake; 
} 

Answer 1

這是因爲removeClass和addClass發生這麼快就不允許DOM趕上每說。你可以做這樣的事情，如果你真的很討厭的setTimeout：

$("#passwordConfig").removeClass('shake animated').delay(50).queue(
    function (next) { 
     $(this).addClass('shake animated'); 
     next(); 
    } 
); 

http://jsfiddle.net/51dwhd2o/

切換類是也沒關係，但看起來它只會工作撥動的所有其他調用。