How To Start And Stop A Multistep Animation While Calling Start() And Stop() In The Console Using Javascript?
I have written following code for multistep animation. Now by default the animation should be in stop mode. On the run of start() in console of web browser it should start the ani
Solution 1:
You can set rect elements .style.animationPlayState to "paused" or "running"
<htmlxmlns="http://www.w3.org/1999/xhtml"><head><style>.equilizer {
height: 100px;
width: 100px;
transform: rotate(180deg);
}
.bar {
fill: DeepPink;
width: 18px;
animation: equalize 1.25ssteps(25, end) 0s infinite;
animation-play-state: paused;
}
.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><button>play/pause</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><script>var button = document.querySelector("button");
var bar = document.querySelectorAll(".bar");
for (let rect of bar) {
rect.style.animationPlayState = "paused";
}
button.addEventListener("click", function(e) {
var state = bar[0].style.animationPlayState;
for (let rect of bar) {
rect.style.animationPlayState = state === "paused" ? "running" : "paused"
}
});
</script></body></html>To play, pause animations using a <button> element
<script>var button = document.querySelector("button");
var bar = document.querySelectorAll(".bar");
for (let rect of bar) {
rect.style.animationPlayState = "paused";
}
button.addEventListener("click", function(e) {
var state = bar[0].style.animationPlayState;
for (let rect of bar) {
rect.style.animationPlayState = state === "paused" ? "running" : "paused"
}
});
</script>To play, pause animations at console you can use
var bar = document.querySelectorAll(".bar");
functionstart() {
for (let rect of bar) {
rect.style.animationPlayState = "running"
}
}
functionstop() {
for (let rect of bar) {
rect.style.animationPlayState = "paused"
}
}
// run animations start();
// pause animationsstop();
Solution 2:
I can suppose, the best way is to write these functions where you add/remove class with the animation attached to it.
Post a Comment for "How To Start And Stop A Multistep Animation While Calling Start() And Stop() In The Console Using Javascript?"