如何通过在js中单击来刷新关键帧动画？
[英]How to refresh keyframe animation by click in js?
问题描述
我想要制作每次点击按钮开始的动画。 这是工作，但只有一次。 再次按下时没有任何反应。 尝试删除并再次添加相同的类。 没有帮助。
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> body{ margin: 0; padding:0; widht: 100%; } </style> </head> <body> <style> @keyframes red-to-black { 0% {background: rgba(150,0,0,100);} 100% {background: rgba(0,0,0,100);} } .RedBack { animation: red-to-black 1s ease-out; } </style> <div id="back" style = "background: black; width: 100vw; height:100vh;"> <button onclick="document.getElementById('back').classList.add('RedBack');">Hello!</button> </div> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2020-01-06 15:30:50
您必须在动画结束后移除该类。 然后，当您再次添加类时，动画将再次触发。
在这里，我在 1 秒后删除了类，因为动画持续时间是 1 秒。
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> body{ margin: 0; padding:0; widht: 100%; } </style> </head> <body> <style> @keyframes red-to-black { 0% {background: rgba(150,0,0,100);} 100% {background: rgba(0,0,0,100);} } .RedBack { animation: red-to-black 1s ease-out; } </style> <div id="back" style = "background: black; width: 100vw; height:100vh;"> <button onclick="onClick()">Hello!</button> </div> <script> function onClick() { document.getElementById('back').classList.add('RedBack'); setTimeout(() => { document.getElementById('back').classList.remove('RedBack'); }, 1000) } </script> </body> </html>
如何在关键帧动画时禁用“单击”/并在完成时启用？
[英]How to disable "click" while keyframe animation / and enable when it finish?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.