TheAndersMan TheAndersMan - 1 month ago 19
Sass (Sass) Question

Animation Pause Not Working

I am making a music loader type thing, and want to be able to toggle the playing on and off by pausing it. I have been unsuccessful in doing this but have gotten it to half work on something simpler which is here:

http://codepen.io/TheAndersMan/pen/MjMrje

Here is the link to what I am trying to get to work:

http://codepen.io/TheAndersMan/pen/qazVGX

Here is my code:

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


Sorry, it's a lot I want to give the full picture though.

Thanks in advance!

Answer

The problem is, that the .paused class is not overriding the animation-play-state when added to the bars. In your SCSS you have to move the class into the bar class like this:

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

This will apply the changes to any object that has .bar and .paused, overriding the initial state, that I also added to the .bar class.

I hope this solves your problem. On my machine it worked fine :)

Comments