Ajax 响应后无法重新触发 CSS 3 动画
Posted
技术标签:
【中文标题】Ajax 响应后无法重新触发 CSS 3 动画【英文标题】:Trouble re-triggering CSS 3 animation after Ajax response 【发布时间】:2013-05-10 14:07:17 【问题描述】:这是一个 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))
这是应该使<span>
标记中的文本显示为红色并抖动的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;
我一直在尝试关注this question,但无济于事。我希望这可以在 FireFox 中使用。谁能给我任何关于我做错了什么以及为什么“错误的用户名/密码”文本不会动摇的指示?
按照 MarZab 的建议,我尝试了
document.getElementById("report").style.webkitAnimationName = "";
setTimeout(function ()
document.getElementById("report").style.webkitAnimationName = "";
document.getElementById("report").style.webkitAnimationName = "animated shake";
, 4);
它仍然没有动摇。
【问题讨论】:
【参考方案1】:使用className
而不是webkitAnimationName
http://jsfiddle.net/5832R/99/
正如在聊天中讨论的那样,真正的问题是execution line
浏览器倾向于只在执行代码后改变 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 = "wrong password/username"
之前?您希望我删除有关超时的代码吗?
你应该在超时时间内替换/添加它。为什么你还有超时 0?
对于超时,我试图关注this answer,这就是他们所拥有的。不是很懂,如果能解释一下就太感谢了。
所以我复制并粘贴了您的代码,但它对我不起作用。我知道它在 jsfiddle 中有效。我无法想象这是在做什么。以上是关于Ajax 响应后无法重新触发 CSS 3 动画的主要内容,如果未能解决你的问题,请参考以下文章