动画暂停不起作用

Posted 2023-03-06

【中文标题】动画暂停不起作用

【英文标题】：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");
      
    );

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

提前致谢！

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

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