How To Start And Remove A Multistep Animation While Calling Start() And Stop() In The Console Using Javascript?

July 25, 2024 Post a Comment

start I have written following code for multistep animation. But I want to get result as shown in above screenshot. i.e., only the black vertical bar would be shown once the webpag

Solution 1:

It seems to me that you can turn the animation on and off by adding or removing the bar class from the elements in question:

var bars = document.querySelectorAll('rect');
for (var i = 0; i < bars.length; i++)
  bars[i].classList.toggle('bar');

Put that code in a function and you can call it from the console as desired, though for demo purposes (expand the snippet to see it work) I include it in a button's click handler:

var bars = document.querySelectorAll('rect');

document.getElementById("startstop").addEventListener("click", function(e) {
  this.innerHTML = this.innerHTML === "Start" ? "Stop" : "Start";
  for (var i = 0; i < bars.length; i++)
    bars[i].classList.toggle('bar');
});

<htmlxmlns="http://www.w3.org/1999/xhtml"><head><style>
   $max: 100px;

.equilizer {
  height: $max;
  width: $max;
  transform: rotate(180deg);
}

.bar {
  fill: DeepPink;
  width: 18px;
  animation: equalize 1.25s steps(25, end) 0s infinite;
}

.bar:nth-child(1) { 
  animation-duration: 1.9s;
}

.bar:nth-child(2) { 
  animation-duration: 2s;
}

.bar:nth-child(3) { 
  animation-duration: 2.3s;
}

.bar:nth-child(4) { 
  animation-duration: 2.4s;
}

.bar:nth-child(5) { 
  animation-duration: 2.1s;
}

@keyframes equalize {
  0% {
    height: 60px;
  }
  4% {
    height: 50px;
  }
  8% {
    height: 40px;
  }
  12% {
    height: 30px;
  }
  16% {
    height: 20px;
  }
  20% {
    height: 30px;
  }
  24% {
    height: 40px;
  }
  28% {
    height: 10px;
  }
  32% {
    height: 40px;
  }
  36% {
    height: 60px;
  }
  40% {
    height: 20px;
  }
  44% {
    height: 40px;
  }
  48% {
    height: 70px;
  }
  52% {
    height: 30px;
  }
  56% {
    height: 10px;
  }
  60% {
    height: 30px;
  }
  64% {
    height: 50px;
  }
  68% {
    height: 60px;
  }
  72% {
    height: 70px;
  }
  76% {
    height: 80px;
  }
  80% {
    height: 70px;
  }
  84% {
    height: 60px;
  }
  88% {
    height: 50px;
  }
  92% {
    height: 60px;
  }
  96% {
    height: 70px;
  }
  100% {
    height: 80px;
  }
}
</style></head><body><buttonid="startstop"type="button">Start</button><svgxmlns="http://www.w3.org/2000/svg"class="equilizer"viewBox="0 0 128 128"><g><title>Audio Equilizer</title><recttransform="translate(0,0)"y="15"></rect><recttransform="translate(25,0)"y="15"></rect><recttransform="translate(50,0)"y="15"></rect><recttransform="translate(75,0)"y="15"></rect><recttransform="translate(100,0)"y="15"></rect></g></svg></body></html>

Or you could change your CSS slightly to apply the animation only to .bar elements that are children of an element with a certain class, and then add or remove that class from the parent element:

var barParent = document.querySelector('g');

document.getElementById("startstop").addEventListener("click", function(e) {
  this.innerHTML = this.innerHTML === "Start" ? "Stop" : "Start";
  barParent.classList.toggle('barstarted');
});

<htmlxmlns="http://www.w3.org/1999/xhtml"><head><style>
   $max: 100px;

.equilizer {
  height: $max;
  width: $max;
  transform: rotate(180deg);
}

.barstarted .bar {        /* ---- note this change */
  fill: DeepPink;
  width: 18px;
  animation: equalize 1.25s steps(25, end) 0s infinite;
}

.bar:nth-child(1) { 
  animation-duration: 1.9s;
}

.bar:nth-child(2) { 
  animation-duration: 2s;
}

.bar:nth-child(3) { 
  animation-duration: 2.3s;
}

.bar:nth-child(4) { 
  animation-duration: 2.4s;
}

.bar:nth-child(5) { 
  animation-duration: 2.1s;
}

@keyframes equalize {
  0% {
    height: 60px;
  }
  4% {
    height: 50px;
  }
  8% {
    height: 40px;
  }
  12% {
    height: 30px;
  }
  16% {
    height: 20px;
  }
  20% {
    height: 30px;
  }
  24% {
    height: 40px;
  }
  28% {
    height: 10px;
  }
  32% {
    height: 40px;
  }
  36% {
    height: 60px;
  }
  40% {
    height: 20px;
  }
  44% {
    height: 40px;
  }
  48% {
    height: 70px;
  }
  52% {
    height: 30px;
  }
  56% {
    height: 10px;
  }
  60% {
    height: 30px;
  }
  64% {
    height: 50px;
  }
  68% {
    height: 60px;
  }
  72% {
    height: 70px;
  }
  76% {
    height: 80px;
  }
  80% {
    height: 70px;
  }
  84% {
    height: 60px;
  }
  88% {
    height: 50px;
  }
  92% {
    height: 60px;
  }
  96% {
    height: 70px;
  }
  100% {
    height: 80px;
  }
}
</style></head><body><buttonid="startstop"type="button">Start</button><svgxmlns="http://www.w3.org/2000/svg"class="equilizer"viewBox="0 0 128 128"><g><title>Audio Equilizer</title><rectclass="bar"transform="translate(0,0)"y="15"></rect><rectclass="bar"transform="translate(25,0)"y="15"></rect><rectclass="bar"transform="translate(50,0)"y="15"></rect><rectclass="bar"transform="translate(75,0)"y="15"></rect><rectclass="bar"transform="translate(100,0)"y="15"></rect></g></svg></body></html>

Html5 Cafe

How To Start And Remove A Multistep Animation While Calling Start() And Stop() In The Console Using Javascript?

Solution 1:

Post a Comment for "How To Start And Remove A Multistep Animation While Calling Start() And Stop() In The Console Using Javascript?"