动画暂停不起作用答案

【问题标题】：Animation Pause Not Working动画暂停不起作用
【发布时间】：2017-03-12 21:59:36
【问题描述】：

我正在制作一个音乐加载器类型的东西，并且希望能够通过暂停来打开和关闭播放。我一直没有成功，但是已经完成了一半的工作，这里有一些更简单的东西：

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");
      }
    });

对不起，我想提供完整的图片。

提前致谢！

【问题讨论】：

标签： javascript html css animation sass

【解决方案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 类的初始状态。

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

【讨论】：