我想在每次提交时都有一个 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);
};
在我写这篇文章的时候,我有一半希望能找到解决方案,但事实并非如此。
最佳答案
根据您的描述,您的代码似乎按预期工作...尝试单击下面的“运行代码片段”:
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() 函数采用“响应”参数这一事实来判断,我假设您在 AJAX 请求的响应处理程序中使用它——此 AJAX 请求是否返回不成功的错误如果表单已经提交过一次代码?如果这个函数附加到 onSuccess() 方法,那就可以解释为什么它只播放一次动画;请求只会在第一次单击按钮时“成功”。
关于javascript - 为什么我不能重用 CSS 关键帧动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34214231/