我有一个关于使用 JavaScript 触发 css 动画的问题。 这是我的代码片段:
const signInBtn = document.querySelector('#signin-btn');
function btnAnimation() {
if (signInBtn.style.animation) {
signInBtn.style.animation = '';
} else {
signInBtn.style.animation = 'btnAnimation 200ms linear';
}
}
signInBtn.addEventListener('click', btnAnimation);body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
button {
border: 2px solid black;
border-radius: 25px;
width: 100px;
height: 40px;
}
button:focus {
outline: none;
}
.wrapper .signin {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes btnAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(.8);
}
100% {
transform: scale(1);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="signin">
<button id="signin-btn">SIGN IN</button>
</div>
</div>
</body>
</html>正如您所看到的，动画每秒都会触发一次。在“if”语句中删除动画属性后，我不知道如何添加动画属性。我需要这个按钮在每次点击时都显示动画。如果你有 jQuery 的解决方案，那没问题，但我想看到纯 JS 的解决方案。提前致谢。
最佳答案
问题是，一旦应用了 CSS 样式，它就会运行一次动画，仅此而已。因此，要在后续操作中再次触发动画，您需要重置按钮的 CSS。这里我使用 setTimeout 在 220ms 后重置样式，这样可以让 css 动画有足够的时间在重置按钮样式之前完成。
要定位多个按钮，您可以在元素之间使用公共(public)类。我选择了 btn-animation。 继续您的代码风格，我使用 document.querySelectorAll 按类名称获取所有元素。
ES5
var nodes = document.querySelectorAll('.btn-animation');
for(var i = 0; i < nodes.length; i++) {
nodes[i].addEventListener('click', function(event) {
this.style.animation = 'btnAnimation 200ms linear';
setTimeout(function(){
event.target.style.animation = '';
}, 220); // reset after delay -- allow enough time for animation to complete
});
}body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
button {
border: 2px solid black;
border-radius: 25px;
width: 100px;
height: 40px;
}
button:focus {
outline: none;
}
.wrapper .signin {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes btnAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(.8);
}
100% {
transform: scale(1);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="signin">
<button id="signin-btn" class="btn-animation">SIGN IN</button>
<button class="btn-animation">Option 1</button>
<button class="btn-animation">Option 2</button>
<button class="btn-animation">Option 3</button>
<button class="btn-animation">Option 4</button>
<button class="btn-animation">Option 5</button>
</div>
</div>
</body>
</html>ES6
const nodes = document.querySelectorAll('.btn-animation');
for(let i = 0; i < nodes.length; i++) {
nodes[i].addEventListener('click', (event) => {
event.target.style.animation = 'btnAnimation 200ms linear';
setTimeout(() => {
event.target.style.animation = '';
}, 220); // reset after delay -- allow enough time for animation to complete
});
}body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
button {
border: 2px solid black;
border-radius: 25px;
width: 100px;
height: 40px;
}
button:focus {
outline: none;
}
.wrapper .signin {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes btnAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(.8);
}
100% {
transform: scale(1);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="signin">
<button id="signin-btn" class="btn-animation">SIGN IN</button>
<button class="btn-animation">Option 1</button>
<button class="btn-animation">Option 2</button>
<button class="btn-animation">Option 3</button>
<button class="btn-animation">Option 4</button>
<button class="btn-animation">Option 5</button>
</div>
</div>
</body>
</html>关于javascript - 如何使用 JavaScript 通过单击删除和添加 css 动画属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64667184/