Ärger Retriggern CSS 3 Animation nach Ajax Antwort

Question

Hier ist ein HTML-Formular

<form method="post" action="camount.php" id="loginForm"> 
    <span id="heading"> 
    Username: <input type="text" name='us' id='us'/><br /> 
    Password: <input type="password" name='pa' id='pa'/><br /> 
    </span> 
    <input type="button" value="Sign in" onclick="isPasswordCorrect(document.getElementById('us'), document.getElementById('pa'))" /><br /> 
    <span class="animated shake" id="report"></span> 
</form> 

Hier ist der relevante Code der JavaScript-Funktion, die hier

if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
    if(xmlhttp.responseText) 
    document.getElementById("loginForm").submit() 
    else{ 
    document.getElementById("report").style.webkitAnimationName = ""; 
    setTimeout(function(){ 
    document.getElementById("report").style.webkitAnimationName="animated shake"; 
    }, 0); 
    var element = document.getElementById('report'); 
    element.innerHTML = "wrong password/username" 
    password.value = "" 
    } 
} 
xmlhttp.open("post", "CheckCred.php", true) 
//required for sending data through POST 
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded") 
xmlhttp.send("name="+encodeURIComponent(name.value)+ 
      "&password="+encodeURIComponent(password.value)) 

aufgerufen wird, wird das CSS, das ist soll den Text in der <span> Markierung in rot erscheinen lassen und schütteln. Es erscheint rot, es schüttelt nicht.

.animated{ 
    -webkit-animation-fill-mode:both; 
    -moz-animation-fill-mode:both; 
    -ms-animation-fill-mode:both; 
    -o-animation-fill-mode:both; 
    animation-fill-mode:both; 
    -webkit-animation-duration:1s; 
    -moz-animation-duration:1s; 
    -ms-animation-duration:1s; 
    -o-animation-duration:1s; 
    animation-duration:1s; 
} 
.animated.hinge{ 
    -webkit-animation-duration:2s; 
    -moz-animation-duration:2s; 
    -ms-animation-duration:2s; 
    -o-animation-duration:2s; 
    animation-duration:2s; 
} 
@-webkit-keyframes shake { 
    0%, 100% {-webkit-transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} 
    20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} 
} 
@-moz-keyframes shake{ 
    0%, 100% {-moz-transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);} 
    20%, 40%, 60%, 80% {-moz-transform: translateX(10px);} 
} 
@-o-keyframes shake{ 
    0%, 100% {-o-transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);} 
    20%, 40%, 60%, 80% {-o-transform: translateX(10px);} 
} 
@keyframes shake{ 
    0%, 100% {transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 
    20%, 40%, 60%, 80% {transform: translateX(10px);} 
}  
.shake { 
    -webkit-animation-name: shake; 
    -moz-animation-name: shake; 
    -o-animation-name: shake; 
    animation-name: shake; 
}  
span#report{ 
    display: block; 
    color: #F80000; 
} 

Ich habe versucht, this question ohne Erfolg zu folgen. Ich möchte, dass dies in FireFox funktioniert. Kann mir jemand Hinweise geben, was ich falsch mache und warum der Text "falscher Benutzername/Passwort" nicht wackelt?

Per MarZab Vorschlag habe ich versucht,

document.getElementById("report").style.webkitAnimationName = ""; 
setTimeout(function(){ 
    document.getElementById("report").style.webkitAnimationName = ""; 
    document.getElementById("report").style.webkitAnimationName = "animated shake"; 
}, 4); 

und es nicht schütteln immer noch nicht.

Answer 1

Verwenden className statt webkitAnimationName

http://jsfiddle.net/5832R/99/

wie im Chat bersprechen, war das eigentliche Problem execution line

Browser den Status des DOM nur dann zu ändern, neigen dazu, nach Ausführung von Code und da die Klasse blieb innerhalb desselben Ausführungscodes gleich, die Animation wurde nicht retrigert.

Setzen der Unset in einer anderen Ausführungszeile, dh. außerhalb des Antrags, gezwungen, das DOM

der gültige Code zu ändern:

function isPasswordCorrect(name, password) 
{ 
    report.className = ""; 

    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") 

    xmlhttp.onreadystatechange=function() 
    { 
    report = document.getElementById('report'); 
    report.className = "animated shake"; 
    } 
}