javascript - 动画暂停不起作用

Question

我正在制作一个音乐加载器类型的东西，并且希望能够通过暂停来打开和关闭播放。我在这方面没有成功，但在一些更简单的事情上已经成功了一半，如下:

http://codepen.io/TheAndersMan/pen/MjMrje

这是我想要开始工作的链接:

http://codepen.io/TheAndersMan/pen/qazVGX

这是我的代码:

HTML:

    <button class="toggle">Pause</button>
    <div class="music">
      <div class="barOne bar"></div>
      <div class="barTwo bar"></div>
      <div class="barThree bar"></div>
    </div>

SCSS:

    body {
      overflow: hidden;
    }

    .toggle {
      font-family: roboto;
      background: #3f51b5;
      border: none;
      font-size: 3em;
      color: white;
      border-radius: 3px;
      margin: 0 auto;
      display: block;
      cursor: pointer;
      outline: none;
    }

    .music {
      width: 20vw;
      display: flex;
      margin: 30vh auto;
      .bar {
        width: calc(20vw / 3);
        background: #ff5252;
        height: 15vw;
        margin-left: .5vw;
      }
      .barOne {
        height: 10vw;
        margin-top: 5vw;
        animation: barOne 0.75s linear infinite;
      }
      .barTwo {
        height: 18vw;
        margin-top: -3vw;
        animation: barTwo 1s linear infinite;
      }
      .barThree {
        height: 14vw;
        margin-top: 1vw;
        animation: barThree 0.75s linear infinite;
      }
    }

    @keyframes barOne {
      0% {
        height: 10vw;
        margin-top: 5vw;
      }
      50% {
        height: 7.5vw;
        margin-top: 7.5vw;
      }
      100% {
        height: 10vw;
        margin-top: 5vw;
      }
    }
    @keyframes barTwo {
      0% {
        height: 18vw;
        margin-top: -3vw;
      }
      50% {
        height: 10vw;
        margin-top: 5vw;
      }
      100% {
        height: 18vw;
        margin-top: -3vw;
      }
    }
    @keyframes barThree {
      0% {
        height: 14vw;
        margin-top: 1vw;
      }
      50% {
        height: 20vw;
        margin-top: -5vw;
      }
      100% {
        height: 14vw;
        margin-top: 1vw;
      }
    }

    .paused {
      -webkit-animation-play-state: paused;
      -moz-animation-play-state: paused;
      -o-animation-play-state: paused;
      animation-play-state: paused;
    }        

JS:

    var state = true;

    document.querySelector(".toggle").addEventListener("click", function() {
      var toggle = document.querySelector(".toggle");
      var one = document.querySelector(".barOne");
      var two = document.querySelector(".barTwo");
      var three = document.querySelector(".barThree");
      if (state === true) {
        state = false;
        toggle.innerHTML = "Play"
        one.classList.add("paused");
        // one.style.animation = "none"
        two.classList.add("paused");
        three.classList.add("paused");
      }
      else {
        state = true;
        toggle.innerHTML = "Pause"
        one.classList.remove("paused");
        two.classList.remove("paused");
        three.classList.remove("paused");
      }
    });

抱歉，我想提供的内容太多了。

提前致谢!

Answer 1

问题是，.paused 类在添加到条形时不会覆盖动画播放状态。在 SCSS 中，您必须将类移动到 bar 类中，如下所示:

.bar {
    width: calc(20vw / 3);
    background: #ff5252;
    height: 15vw;
    margin-left: .5vw;
    animation-play-state: running;
    &.paused {
      -webkit-animation-play-state: paused;
      -moz-animation-play-state: paused;
      -o-animation-play-state: paused;
      animation-play-state: paused;
    }
}

这会将更改应用于任何具有 .bar 和 .paused 的对象，覆盖初始状态，我也将其添加到 .bar 类中。

我希望这能解决您的问题。在我的机器上运行良好:)