动画暂停不起作用

时间:2016-10-30 17:28:00

标签: javascript html css animation sass

我正在制作一个音乐加载器类型的东西,并希望能够通过暂停来打开和关闭播放。我没有成功地做到这一点,但已经把它做了一半更简单的事情在这里:

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

对不起,我想要全面了解这一点。

提前致谢!

1 个答案:

答案 0 :(得分:2)

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

&#13;
&#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;
&#13;
&#13;

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

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