Adding animations to the buttons in sequence within a certain time

kennedyforf 0
Viewed 55

For example, I have 5 buttons and I have a time of 10 seconds. I'm trying to play animations behind each button, starting from the 1st button, for 2 seconds each. But as I tried below, after playing the animations in sequence, it gets mixed up and the animations of the buttons play randomly. Below are the codes I have tried.

I have one function as follows, and when the time is up, I enter this function and process it.sorry i am new to javascipt i tried this way.Exactly what I want:The animation of the 1st button will play for 2 seconds and it will switch to the animation of the 2nd button, it will play for 2 seconds and will switch to the animation of the 3rd button. So in order

function reset() {
            document.getElementById("1").style.animation = "glowing 500ms infinite";
            setTimeout(function () {
                document.getElementById("1").style.animation = "none";
            }, 500);
            setTimeout(function () {
                document.getElementById("2").style.animation = "glowing 500ms infinite";
            }, 500);
            setTimeout(function () {
                document.getElementById("2").style.animation = "none";
            }, 1000);
            setTimeout(function () {
                document.getElementById("3").style.animation = "glowing 500ms infinite";
            }, 1000);
            setTimeout(function () {
                document.getElementById("3").style.animation = "none";
            }, 1500);
            setTimeout(function () {
                document.getElementById("4").style.animation = "glowing 500ms infinite";
            }, 1500);
            setTimeout(function () {
                document.getElementById("4").style.animation = "none";
            }, 2000);
            setTimeout(function () {
                document.getElementById("5").style.animation = "glowing 500ms infinite";
            }, 2000);
            setTimeout(function () {
                document.getElementById("5").style.animation = "none";
            }, 2500);

}
javascript
2 Answers

As I told you in my first comment (to which you did not react), you must use a chain of promises.

  • there are a lot of technical things to know (the MDN doc is there for that)
    and I'm not some kind of teacher; anyway StackOverflow is not an online college.

start with generator functions

However, if you have any questions... ;)
-- but SO is already full of questions and answers on many technical points used here

this can result in JS code like this:

const 
  [btA, btB, btC, btD, btE] = [...document.querySelectorAll('#btns > button')]
, delay             = ms => new Promise(r => setTimeout(r, ms))
, animLoopGenerator = function* ()
  {
  const animLoop = 
    [ { stop: null, start: btA,  time_ms: 2000 } 
    , { stop: btA,  start: btB,  time_ms: 2000 }
    , { stop: btB,  start: btC,  time_ms: 2000 }
    , { stop: btC,  start: btD,  time_ms: 2000 }
    , { stop: btD,  start: btE,  time_ms: 2000 }
    , { stop: btE,  start: null, time_ms: null }
    ];
  for (let elm of animLoop) yield elm;
  };
async function do_Animtions()
  { 
  for await ( { stop, start, time_ms } of animLoopGenerator() )
    {
    if (stop)    stop.classList.remove('glowing500');
    if (start)   start.classList.add('glowing500');
    if (time_ms) await delay(time_ms);
    }
  }
btnTest.onclick = async () =>  // testing
  {
  btnTest.disabled = true;
  await do_Animtions();
  btnTest.disabled = false;
  }
#btns > button
  {
  padding          : .2em 1em .3em 1em;
  border           : 1px solid black;
  background-color : whitesmoke;
  }
.glowing500 
  {
  animation : glowing 500ms infinite; 
  }
@keyframes glowing 
  {
  50%  { background-color: red; }
  100% { background-color: blue }
  }
<div id="btns">
  <button>Number1</button>
  <button>Number2</button>
  <button>Number3</button>
  <button>Number4</button>
  <button>Number5</button>
</div>

<br> <button id="btnTest"> test animation </button>

Mister Jojo0

i am not sure if this is what you want because you didnt provide actual css and html but you can delay animations with css like this.hope it helps

.btn {
        padding: 10px 30px;
        border:1px solid black;
        background-color:white;
        animation: glowing 2s;
    }

    .btn:nth-child(2) {
        animation-delay: 2s;
    }
    .btn:nth-child(3) {
        animation-delay: 4s;
    }
    .btn:nth-child(4) {
        animation-delay: 6s;
    }
    .btn:nth-child(5) {
        animation-delay: 8s;
    }

    @keyframes glowing {
        50% {
            background-color: red;
        }

        100% {
            background-color: blue
        }
    }
    <button class="btn">Number1</button>
    <button class="btn">Number2</button>
    <button class="btn">Number3</button>
    <button class="btn">Number4</button>
    <button class="btn">Number5</button>

UmairFarooq0
Related