アニメ一時停止しない

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クラスがアニメーション再生状態をオーバーライドしないという問題があります。 、これは初期状態をオーバーライドし、.BARを持っており、.paused任意のオブジェクトに変更を適用します

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

：あなたSCSSでは、このようにバークラスにクラスを移動する必要が私も.barクラスに追加しました。

これがあなたの問題を解決することを願っています。私のマシンでは正常に動作しました:)