Trouble re-triggering CSS 3 animation after Ajax response

Question

Here is an HTML form:

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

Here is the relevant code of the JavaScript function that is called

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))

Here is the CSS that is supposed to make the text in the <span> tag appear in red and shake. It does appear in red, it does not shake.

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

I've been trying to follow this question to no avail. I would like this to work in FireFox. Can any one give me any pointers as to what I'm doing wrong and why the text "wrong username/password" won't shake?

As per MarZab's suggestion I tried

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

and it still doesn't shake.

MarZab · Accepted Answer · 2013-05-18 00:42:09Z

Use className instead of webkitAnimationName

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

as discused in chat, the real issue was execution line

browsers tend to only change the state of the DOM after executing code and since the class remained the same inside the same execution code, the animation was not retrigered.

putting the unset in another execution line, ie. outside of the request, forced the DOM to change

the valid code is:

function isPasswordCorrect(name, password) { report.className = ""; xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") xmlhttp.onreadystatechange=function() { report = document.getElementById('report'); report.className = "animated shake"; } }

Still no. If you like up-vote the question so it gets more attention.
Where did you want me to add the code anyways, right before element.innerHTML = "wrong password/username"? Did you expect me to remove the code regarding the timeout?
you should replace/add this inside the timeout. why do you have a timeout 0 anyway?
For the timeout I'm trying to follow this answer and that is what they have. I don't really understand it, if you can explain it that would be great thanks.
So I copied and pasted your code and it doesn't work for me. I know it works in jsfiddle. I can't imagine what is doing this.

Collectives™ on Stack Overflow

Trouble re-triggering CSS 3 animation after Ajax response

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Linked

Related