the

the

关注
发信
关注(28)粉丝(399)

如何使用Javascript在控制台中调用start（）和stop（）时启动和删除多步动画？

本文介绍了如何使用Javascript在控制台中调用start（）和stop（）时启动和删除多步动画？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述


我写了以下多段动画的代码。但我想得到结果如上图截图所示。即只有在网页启动后才会显示黑色垂直条。。那么如截图所示，如果我在控制台运行start（），它应该运行动画，如果我在控制台运行stop（），它应该回到垂直条。

startI 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 webpage is launched.stop. then as shown in the screenshot if I run a start() at console it should run the animation and if I run stop() at console it should be back to vertical bar. 

<html xmlns="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>
  <svg xmlns="http://www.w3.org/2000/svg" class="equilizer" viewBox="0 0 128 128">
  <g>
    <title>Audio Equilizer</title>
    <rect class="bar" transform="translate(0,0)" y="15"></rect>
    <rect class="bar" transform="translate(25,0)" y="15"></rect>
    <rect class="bar" transform="translate(50,0)" y="15"></rect>
    <rect class="bar" transform="translate(75,0)" y="15"></rect>
    <rect class="bar" transform="translate(100,0)" y="15"></rect>
  </g>
</svg>
</body>
</html>

现在默认情况下，动画应该处于停止模式。我将如何使用简单的JavaScript（我建议不要使用任何外部框架/库，除了简单的HTML，CSS和JAVASCRIPT）。

Now by default the animation should be in stop mode. How will I proceed for this using simple JavaScript (I am recommended to not to use any external frameworks/libraries except simple HTML,CSS and JAVASCRIPT).

推荐答案

在我看来，你可以通过从有问题的元素中添加或删除 bar 类来打开和关闭动画：

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');
});
<html xmlns="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>
  <button id="startstop" type="button">Start</button>
  <svg xmlns="http://www.w3.org/2000/svg" class="equilizer" viewBox="0 0 128 128">
  <g>
    <title>Audio Equilizer</title>
    <rect transform="translate(0,0)" y="15"></rect>
    <rect transform="translate(25,0)" y="15"></rect>
    <rect transform="translate(50,0)" y="15"></rect>
    <rect transform="translate(75,0)" y="15"></rect>
    <rect transform="translate(100,0)" y="15"></rect>
  </g>
</svg>
</body>
</html>

或者你可以稍微改变你的CSS，将动画只应用到 .bar 元素，这些元素是具有某个类的元素的子元素，然后添加或从父元素中删除该类：

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');
});
<html xmlns="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>
  <button id="startstop" type="button">Start</button>
  <svg xmlns="http://www.w3.org/2000/svg" class="equilizer" viewBox="0 0 128 128">
  <g>
    <title>Audio Equilizer</title>
    <rect class="bar" transform="translate(0,0)" y="15"></rect>
    <rect class="bar" transform="translate(25,0)" y="15"></rect>
    <rect class="bar" transform="translate(50,0)" y="15"></rect>
    <rect class="bar" transform="translate(75,0)" y="15"></rect>
    <rect class="bar" transform="translate(100,0)" y="15"></rect>
  </g>
</svg>
</body>
</html>

这篇关于如何使用Javascript在控制台中调用start（）和stop（）时启动和删除多步动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-29 00:13
Powered by LMLPHP ©2024 the 0.001653