javascript - 如何在使用 Javascript 在控制台中调用 start() 和 stop() 时启动和删除多步动画？

<分区>

start 我为多步动画编写了以下代码。但我想得到如上图所示的结果。即，一旦网页启动，只会显示黑色垂直条。 stop .然后如屏幕截图所示，如果我在控制台运行 start() 它应该运行动画，如果我在控制台运行 stop() 它应该回到垂直条。

<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)。

最佳答案

在我看来，您可以通过在相关元素中添加或删除 bar 类来打开和关闭动画:

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

将该代码放入一个函数中，您可以根据需要从控制台调用它，但出于演示目的(展开代码段以查看它的工作原理)，我将其包含在按钮的点击处理程序中:

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 元素，然后从父元素中添加或删除该类:

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 - 如何在使用 Javascript 在控制台中调用 start() 和 stop() 时启动和删除多步动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39684019/

上一篇：javascript - 为什么 Angular 不渲染我的 CSS？

下一篇：css - SASS (.sass) 为什么这个变量把一切都搞砸了？

相关文章：

php - 是否有适用于 Web 开发人员的多屏幕尺寸/纵横比库？

html - 如何使 x-overflow 在表而不是窗口上呈现？

css - OL-LI 列出 Unicode 中的数字

android - CSS 位置 :fixed causes blurry images in Android Browsers

Javascript 的 "document.write()"中的 PHP 代码

html - CSS 对齐 html 中的文本 "line"

javascript - 我需要隐藏/删除网址中的路径

javascript - 动态添加新字段后创建一个 "remove fields"按钮？

javascript - 将 AJAX 响应设置为 JavaScript 变量以供重用

php - Wordpress 导航菜单悬停状态和下拉菜单工作，但菜单不可点击