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类中，如下所示：

＆＃13;

.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;
    }
}

＆＃13;

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

我希望这能解决你的问题。在我的机器上它运行良好：）

动画暂停不起作用

1 个答案: