Javascript - How to change animation's duration onclick
Question
How can I change the animation duration onclick? This is what I've done, I created two buttons, one with an animationduration of 10s while the other has an animationduration of 20s. The duration regardless of which button I click is the same, 10 seconds, as it is in the class section. How can I get depending on the button I click two different durations? Please use normal Javascript, no Jquery. Thank you! I also need to use the document.GetElementById().classname =""; as it is in the code.
function tenseconds() { animation(); var sd = document.getElementById('ghost').className = 'earth'; sd.style.animationDuration = "10s"; } function twentyseconds() { animation(); var sd = document.getElementById('ghost').className = 'earth'; sd.style.animationDuration = "20s"; } function animation() { document.getElementById('ghost').className = 'earth'; }
<!DOCTYPE html> <html> <head> <style> .earth { position: relative; animation: move 10s linear; background: red; height: 20px; width: 20px; } @-webkit-keyframes move { from { left: 0%; } to { left: 100%; } } </style> </head> <body> <div id="ghost"> </div> <button onclick="tenseconds();">10 seconds </button> <button onclick="twentyseconds()"> 20 seconds </button> </body> </html>
2 answers
solution1
0 ACCPTED 2018-03-11 17:22:20
Updated to use an animation, data attributes etc. Customize as needed. NOT supported in Edge, IE perhaps others. Leave to you to investigate possible ways to fix that. Review OLD edit for the original "fix"
I added another element and button so you could see how it might be used.
var myAnimation = { keyframes: [ // keyframes { transform: 'translateX(0px)' }, { transform: 'translateX(300px)' } ], options: { // timing options // ms of duration default 1 second duration: 1000, iterations: 1, //forever would be Infinity easing: "linear" } }; function animation(target, duration, visual) { let sd = document.getElementById(target); sd.className = visual; myAnimation.options.duration = duration * 1000; sd.animate(myAnimation.keyframes, myAnimation.options,visual); } function setup() { let classThings = document.getElementsByClassName("animate-button"); let myFunction = function() { let duration = this.dataset.duration; let visual = this.dataset.visual; let target = this.dataset.target; animation(target, duration, visual); }; for (var i = 0; i < classThings.length; i++) { classThings[i].addEventListener('click', myFunction, false); } } (function() { setup(); })();
<!DOCTYPE html> <html> <head> <style> .fire { position: relative; background: red; height: 20px; width: 20px; } .water { position: relative; background: blue; height: 20px; width: 20px; } </style> </head> <body> <div id="ghost"></div> <div id="billy"></div> <button class="animate-button" data-duration="10" data-target="ghost" data-visual="fire">10 seconds</button> <button class="animate-button" data-duration="20" data-target="ghost" data-visual="fire">20 seconds</button> <button class="animate-button" data-duration="5" data-target="billy" data-visual="water">5 seconds billy</button> </body> </html>
solution2
0 2018-03-11 18:28:55
I created a little function that takes the animation time in seconds as an argument. Read the comments in the code for explanation.
function animation(duration) { // select whatever element you are trying to animate let target = document.getElementById('ghost'); // change the animationduration before starting to animate target.style.animationDuration = `${duration}s`; // add the animating class and start the animation target.classList.add('animating'); // create a timeout to remove the animating class from your animated element setTimeout(() => { target.classList.remove('animating'); }, `${duration*1000}`); }
#ghost{ position: relative; background: red; height: 20px; width: 20px; } .animating { animation: move 10s linear; } @-webkit-keyframes move { from { left: 0%; } to { left: 100%; } }
<!DOCTYPE html> <div id="ghost"> </div> <button onclick="animation(10);">10 seconds </button> <button onclick="animation(20);"> 20 seconds </button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.