在Ajax响应后重新触发css3动画时出现问题

Trouble re-triggering CSS 3 animation after Ajax response

本文关键字：动画 问题 css3 新触发 Ajax 响应      更新时间：2023-09-26

这是一个HTML表单:

<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>
下面是JavaScript函数 的相关代码
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))

这是CSS，应该使<span>标签中的文本显示为红色和震动。它确实显示为红色，它不抖动。

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

我一直在努力理解这个问题，但无济于事。我希望这能在FireFox中工作。有谁能给我点建议，告诉我我做错了什么，为什么文本"用户名/密码"错误?不会动摇?

根据MarZab的建议，我尝试了

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

还是不摇

用className代替webkitAnimationName

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

在聊天中讨论的

，真正的问题是execution line

浏览器倾向于只在执行代码后更改DOM的状态由于类在相同的执行代码中保持不变，因此动画不会被重新触发。

将未设置放到另一个执行行中。在请求之外，强制DOM更改

的有效代码是:

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