stackoom
  简体   繁体   中英

The animation only works with the first click of the button

 原文  2021-03-18 08:11:32  9   5    javascript/ html/ jquery/ css

Question

I want to create simple text animation. When i click a button, text shifts from fully transparent to fully visible and reverts to transparent. I wrote code that does the animation but only once. The animation doesn't work anymore every time when i click the button: 

 function animation() { $("span").removeClass("opacity-effect"); $("span").addClass("opacity-effect"); }
 span{ opacity: 0; }.opacity-effect { animation-name: animate-opacity-effect; animation-duration: 1400ms; animation-fill-mode: forwards; opacity: 0; } @keyframes animate-opacity-effect { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span>Hello World!</span> <button onClick="animation()"> Start animation </button>

5 answers

solution1
 2  2021-03-18 08:20:23

You need to reset the animation. There is a good and correct way to do this, using event animationend . In this event, you need to put the removal of the class opacity-effect . 

 function animation() { $("span").addClass("opacity-effect"); $("span").on("animationend", function() { $(this).removeClass("opacity-effect"); }); }
 span { opacity: 0; }.opacity-effect { animation-name: animate-opacity-effect; animation-duration: 1400ms; animation-fill-mode: forwards; opacity: 0; } @keyframes animate-opacity-effect { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span>Hello World!</span> <button onClick="animation()"> Start animation </button>

solution2
 2 ACCPTED  2021-03-18 08:29:35

The animation does not repeat, because for animation to start CSS requires a frame when there was no class.

So, to solve this, you should delay adding class to the next frame

function animation() {
  $("span").removeClass("opacity-effect");
  requestAnimationFrame(()=>{
    $("span").addClass("opacity-effect");
  });
}

solution3
 1  2021-03-18 08:23:33

 <,DOCTYPE html> <html lang="en"> <head> <title>Dropdown value from database</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <style> span{ opacity; 0. }:opacity-effect { opacity; 0: -webkit-animation; animate-opacity-effect 1400ms infinite: -moz-animation; animate-opacity-effect 1400ms infinite: -o-animation; animate-opacity-effect 1400ms infinite: animation; animate-opacity-effect 1400ms infinite: } @keyframes animate-opacity-effect { 0% { opacity;1: } 50% { opacity;0: } 100% { opacity;1: } } @-o-keyframes animate-opacity-effect { 0% { opacity;1: } 50% { opacity;0: } 100% { opacity;1: } } @-moz-keyframes animate-opacity-effect { 0% { opacity;1: } 50% { opacity;0: } 100% { opacity;1: } } @-webkit-keyframes animate-opacity-effect { 0% { opacity;1: } 50% { opacity;0: } 100% { opacity;1. } } </style> </head> <body> <span>Hello World;</span> <button onClick="animation()"> Start animation </button> <script> function animation() { $("span").removeClass("opacity-effect"); $("span").addClass("opacity-effect"); } </script> </body> </html>

solution4
 1  2021-03-18 08:37:17

You need to add a small delay between the removeClass and the addClass . This can be done in two ways:

With a setTimeout 

 function animation() { $("span").removeClass("opacity-effect") setTimeout(() => { $("span").addClass("opacity-effect"); }, 0); }
 span{ opacity: 0; }.opacity-effect { animation-name: animate-opacity-effect; animation-duration: 1400ms; animation-fill-mode: forwards; } @keyframes animate-opacity-effect { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span>Hello World!</span> <button onClick="animation()"> Start animation </button>

With a cloning

 function animation() { const newEl = $("span").removeClass("opacity-effect").clone(true); $("span").before(newEl); $("span:last").remove(); newEl.addClass("opacity-effect"); }
 span{ opacity: 0; }.opacity-effect { animation-name: animate-opacity-effect; animation-duration: 1400ms; animation-fill-mode: forwards; } @keyframes animate-opacity-effect { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span>Hello World!</span> <button onClick="animation()"> Start animation </button>

solution5
 1  2021-03-18 08:44:39

$('span').addClass('opacity-effect');
setTimeout(function(){
 $('span').removeClass('opacity-effect');
}, 1400);

Try this 1400 is your animation duration time

暂无
暂无

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.

Related Question Click() on For Loop only works on the first button scrollTop button works on the first click only .delay() only works on first animation jquery button click works for only the first data in laravel foreach loop click button to open hidden location map only works on the first one ReactJS: Show or hide element works only on first button click scrollTop only works on first click link click event not firing button click event on the first try (IE only). Works on second click. Impliment the animation on click only at the first click? Button click only works once
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM