[英]How to remove and add css animation property in single click with JavaScript
我有一个关于用 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动画在重置按钮样式之前有足够的时间完成。
要定位多个按钮，您可以在元素之间使用公共类。 我选择了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 后添加 CSS 并在未单击时将其删除
[英]How to add CSS after click through javascript and remove it if not clicked
如何使用 Javascript 通过单击向嵌套在 UL 中的多个子元素添加和删除类？
[英]How do I add and remove classes to multiple child elements nested in an UL with a single click using Javascript?
想要添加一个值并使用javascript或jquery一次删除
[英]Want to add a value and remove on a single click using javascript or jquery
使用 javascript 添加和删除 class 时，Css 转换属性不起作用
[英]Css transition property not work when add and remove class using javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.