使用 jquery 和 scss 的自定义按钮动画无法停止

Question

我有一个带有两个CSS动画的按钮。 第一个动画旋转按钮。 第二个动画生成"完成"消息。 但是，第一个动画继续循环播放。

我使用 jquery 选择器向按钮添加一个事件侦听器，并将一个回调函数传递给 click 方法，该方法为其提供设置旋转动画的类。 然后，在 250 毫秒的延迟之后，应该调用作为第三个参数传递到回调内 'addClass' 方法的函数，这应该删除这个类并给它一个 'validate' 类。 此验证类应生成"done"消息，但按钮继续无限期旋转。

另外，有人可以向我解释为什么 b 标签在 HTML 中没有 b 标签时在 CSS 中设置样式。 这段代码是练习的一部分，我不清楚为什么必须在 b 标签上进行任何样式设置，如果有地方我应该放置粗体标签？

有人可以指导我在这里出错的地方吗？

这是 HTML：

<div class="wrapper">
button id="button" class="btn btn1"> Submit</button>
</div>

编译后的 CSS：

* {
font-family: 'Roboto', sans-serif; }
.wrapper {
position: absolute;
top: 50%;
left: 50%;
margin-left: -65px;
margin-top: -20px;
width: 130px;
height: 40px;
text-align: center; }
.button {
position: relative;
bottom: 75px;
color: #0099CC;
/* Text color */
background: transparent;
/* Remove background color */
border: 2px solid #0099CC;
/* Border thickness, line style, and color */
border-radius: 70px;
/* Adds curve to border corners */
text-decoration: none;
text-transform: uppercase;
/* Make letters uppercase */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
cursor: pointer; }
.button1 {
background-color: white;
color: black;
border: 2px solid #008CBA; }
.button1:hover {
background-color: #008CBA;
color: white; }
b {
outline: none;
height: 40px;
text-align: center;
width: 130px;
border-radius: 100px;
background: #fff;
border: 2px solid #008CBA;
color: #008CBA;
letter-spacing: 1px;
text-shadow: 0;
font-size: 12px;
font-weight: bold;
cursor: pointer;
transition: all 0.25s ease; }
b:active {
letter-spacing: 2px; }
b:after {
content: ""; }
.onclic {
width: 10px !important;
height: 70px !important;
border-radius: 50% !important;
border-color: #bbbbbb;
border-width: 4px;
font-size: 0;
border-left-color: #008CBA;
animation: rotating 2s 0.25s linear infinite ; }
.onclic:hover {
color: dodgerblue;
background: white; }
.validate {
content: "";
font-size: 16px;
color: black;
background: dodgerblue;
border-radius: 50px; }
.validate:after {
font-family: 'Verdana';
content: " done f00c"; }
@keyframes rotating {
from {
transform: rotate(0deg); }
to {
transform: rotate(360deg); } }

还有 jQuery 脚本：

$(function() {
$("#buttons").click(function() {
$("#buttons").addClass("onclic", 250, validate);
});
function validate() {
setTimeout(function() {
$("#buttons").removeClass("onclic");
$("#buttons").addClass("validate", 450, callback);
}, 2250);
}
function callback() {
setTimeout(function() {
$("#buttons").removeClass("validate");
}, 1250);
}
});

任何反馈不胜感激！

Answer 1

我认为在你编程专业知识的这一点上，你应该开始使用控制台.log看看当没有任何工作时发生了什么，但首先，你需要提供好的例子，因为代码中实际上存在应该改进的错误，所以让我们开始，首先让它工作：

HTML 按钮元素缺少代码字符：

<div class="wrapper">
<button id="button" class="btn btn1"> Submit</button>
</div>

你的 JavaScript 调用"按钮"作为 ID：

$("#buttons").click(function() ...........
//Should be #button, because you don't have a group of buttons, you only have one

当然，jquery 的 addClass 方法只能接受一个类或函数，你可以在这里查看： https://api.jquery.com/addclass/

因此，只需添加和删除类，正如Zakaria在您的问题的评论中所说的那样，如果您仍然想使用一些延迟，您可以随时添加addClass('validate'(.delay(450(。

关于 b 元素，浏览器客户端将该元素视为与强标签相同，因此它基本上只是增加了一个字体粗细：bold; 除此之外，我有一种感觉，代码中的"b"不是一个标签元素，而是一个类，所以你必须把它作为.b{并将其分配给你的按钮元素， 喜欢这个：

<button id="button" class="btn btn1 b"> Submit </button>

然后在 CSS 中：

.b {
outline: none;
height: 40px;
text-align: center;
width: 130px;
border-radius: 100px;
background: #fff;
border: 2px solid #008CBA;
color: #008CBA;
letter-spacing: 1px;
text-shadow: 0;
font-size: 12px;
font-weight: bold;
cursor: pointer;
transition: all 0.25s ease; 
}
.b:active {
letter-spacing: 2px; 
}
.b:after {
content: ""; 
}

然后你会看到按钮现在有点变化，这很好，因此你想合并几个类，例如将class="btn btn1 b"更改为一个class="buttonSubmit"，并将按钮的所有样式放在那里。

现在 CSS 中的 button1 类也没有做任何事情，所以只需将该按钮的所有样式更改为一个元素 CSS 样式，如下所示：

button{
outline: none;
height: 40px;
text-align: center;
width: 130px;
border-radius: 100px;
background: #fff;
border: 2px solid #008CBA;
color: #008CBA;
letter-spacing: 1px;
text-shadow: 0;
font-size: 12px;
font-weight: bold;
cursor: pointer;
transition: all 0.25s ease; 
}
button:active {
letter-spacing: 2px; 
}
button:hover {
background-color: #008CBA;
color: white; 
}

另外，如果你在主类"validate"中有一个内容："，并且你有一个后，它将采用第二个内容："，所以我只是从主类中删除了第一个，而不是后面。最后一件事，是尝试不要在你的CSS中使用！important，如果你需要输入！important，可能是因为元素在DOM中没有正确排序。

希望所有这些都有所帮助。

工作小提琴：https://jsfiddle.net/6rhgsvke/27/