Javascript Ajax响应后重新触发CSS 3动画时出现问题
这是一个HTML表单:Javascript Ajax响应后重新触发CSS 3动画时出现问题,javascript,css,ajax,animation,dom-events,Javascript,Css,Ajax,Animation,Dom Events,这是一个HTML表单: <form method="post" action="camount.php" id="loginForm"> <span id="heading"> Username: <input type="text" name='us' id='us'/><br /> Password: <input ty
<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>
下面是CSS,它应该使
标记中的文本显示为红色并抖动。它确实显示为红色,不抖动
.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中运行。有谁能给我指点一下我做错了什么,为什么“错误的用户名/密码”不会动摇
按照马扎布的建议,我试过了
document.getElementById("report").style.webkitAnimationName = "";
setTimeout(function (){
document.getElementById("report").style.webkitAnimationName = "";
document.getElementById("report").style.webkitAnimationName = "animated shake";
}, 4);
它仍然不会抖动。使用
className
而不是webkitAnimationName
正如chat中所讨论的,真正的问题是执行行
浏览器往往只在执行代码后更改DOM的状态
由于类在相同的执行代码中保持不变,因此动画没有重新渲染
将unset放在另一个执行行中,即请求之外,会迫使DOM更改
有效代码为:
function isPasswordCorrect(name, password)
{
report.className = "";
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
xmlhttp.onreadystatechange=function()
{
report = document.getElementById('report');
report.className = "animated shake";
}
}
仍然没有。如果你喜欢投票,那么这个问题会引起更多的注意。你希望我在哪里添加代码,就在
element.innerHTML=“错误的密码/用户名”
之前?您希望我删除有关超时的代码吗?您应该在超时内替换/添加此代码。为什么会有一个超时0?对于超时,我正试图遵循,这就是他们所拥有的。我真的不明白,如果你能解释的话,那太好了,谢谢。所以我复制并粘贴了你的代码,它对我不起作用。我知道它在JSFIDLE中有效。我无法想象这是怎么回事。
function isPasswordCorrect(name, password)
{
report.className = "";
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
xmlhttp.onreadystatechange=function()
{
report = document.getElementById('report');
report.className = "animated shake";
}
}