Question

我希望每次提交一个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);
};

在我写这篇文章时，我有一半期望解决方案来找我，但事实并非如此。

Answer 1

根据您的说明，您的代码似乎按预期工作...尝试点击＆＃34;运行代码段＆＃34;下面：

＆＃13;

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

＆＃13;

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

＆＃13;

<div id="container" class="hidden">
    <div id="example">My example text</div>
</div>
<button onclick="enlarge()">Submit</button>

＆＃13;

您是否确定每次点击提交按钮时都会运行放大功能？

判断你的enlarge（）函数需要＆＃34;响应＆＃34;参数，我假设你在AJAX请求的响应处理程序中使用它 - 如果表单已经提交过一次，这个AJAX请求是否会返回一个不成功的错误代码？如果将此函数附加到onSuccess（）方法，则可以解释为什么它只播放动画一次;请求只会是＆＃34;成功＆＃34;第一次点击按钮。

为什么我不能重用CSS关键帧动画？

1 个答案: