为什么我不能重用CSS关键帧动画？
提问于 2015-12-11 00:24:17
我想有一个CSS关键帧动画提交，每次，但目前它只在第一次工作。你能看到我做错了什么吗？
CSS：
@keyframes enlarge {
0% {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
100% {-webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5);}
}
.enlarge {
animation-name: enlarge;
animation-duration: 2s;JS：
var enlarge = function(response) {
document.querySelector("#messageContainer").classList.add("enlarge");
var reset = setTimeout(function() {
document.querySelector("#messageContainer").classList.remove("enlarge");
}, 2000);
};在我写这篇文章的时候，我半心半意地想着解决方案会来找我，但它没有。
回答 1
Stack Overflow用户
发布于 2015-12-11 01:07:15
根据您的描述，您的代码似乎可以正常工作。尝试单击下面的“运行代码片段”：
var enlarge = function(response) {
document.querySelector("#container").classList.remove("hidden");
document.querySelector("#example").classList.add("enlarge");
var reset = setTimeout(function() {
document.querySelector("#example").classList.remove("enlarge");
document.querySelector("#container").classList.add("hidden");
}, 2000);
};#example {
background: red;
width: 150px;
}
@keyframes enlarge {
0% {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
100% {-webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5);}
}
.hidden { display: none; }
.enlarge {
animation-name: enlarge;
animation-duration: 2s;
}<div id="container" class="hidden">
<div id="example">My example text</div>
</div>
<button onclick="enlarge()">Submit</button>
你确定你的放大功能在每次点击提交按钮时都在运行吗？
根据enlarge()函数接受" response“参数的事实，我假设您正在AJAX请求的响应处理程序中使用它--如果表单已经提交过一次，此AJAX请求是否会返回一个不成功的错误代码？如果此函数附加到onSuccess()方法，这就解释了为什么它只播放一次动画；只有在第一次单击按钮时，请求才会“成功”。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34214231
复制相关文章
腾讯云开发者
