Zdjęcie animacji poprzez javascript

Question

Witajcie,

mam problem z zdjęciem animacji z elementu html <i> poprzez javascript, udaje mi sie zdjąć z niego wcześniej ustanowiony kolor, lecz wcześniej ustanowiona animacja pozostaje. 

część kodu ustawiająca animacje: 

<script>               
                    var bell = document.querySelector(".bell");
                    bell.style.color = "red";
                    bell.style.animation = "ring 4s .7s ease-in-out infinite";
                    bell.style[-webkit-animation] = "ring 4s .7s ease-in-out infinite";
                    bell.style[-moz-animation] = "ring 4s .7s ease-in-out infinite";
</script>

 

Część kodu, która powinna zdjąć animację, lecz zmienia tylko kolor z czerwonego na biały:

                    var bell = document.querySelector(".bell");
                    bell.style.color = "white";
                    bell.style.animation = "none !important";
                    bell.style[-webkit-animation] = "none !important";
                    bell.style[-moz-animation] = "none !important";

 

Proszę o podpowiedź jak rozwiązać takie działanie.

Answer 1

Użyj zapisu, bez: !important w przypadku użyciu shorthand-a animation dla style z poziomu javascript.

var bell = document.querySelector('.bell');
bell.style.color = 'white';
bell.style.animation = 'none';
bell.style['-webkit-animation'] = 'none';
bell.style['-moz-animation'] = 'none';

 

lub

var bell = document.querySelector('.bell');
bell.style.color = 'white';
bell.style.cssText = 'animation: none !important;'
                   + '-webkit-animation: none !important;'
                   + '-moz-animation: none !important;';

 

lub "pozwól" animacji wykonać się do końca i wtedy stop.

var bell = document.querySelector('.bell');
bell.style.color = 'white';
bell.style.cssText = 'animation: ring 4s .7s ease-in-out backwards;'
                   + '-webkit-animation: animation: ring 4s .7s ease-in-out backwards;'
                   + '-moz-animation: animation: ring 4s .7s ease-in-out backwards;';

 

lub "zatrzymaj" animację

var bell = document.querySelector('.bell');
bell.style.color = 'white';
bell.style.animationPlayState = 'paused';

 

Comments

Sprawdziłem każde rozwiązanie, ale niestety działa tylko 

bell.style.animationPlayState = 'paused';

 

Twoja propozycja, aby pozwolić wykonać się do końca animacji niestety nie przynosi rezultatu,a zapałzowanie animacji nie jest w tym przypadku dobrym pomysłem bo gdy user kliknie w element dzwonek może zakończyć dzwonienie przechylony o np 35%

---

To może spróbuj przez dodanie lub usunięcie klasy z ustawioną animacją, np.:

 

<div class="bell">
  <div class="bell-top"></div>
  <div class="bell-bottom"></div>
</div>

:root {
  --main-bg-color: cornflowerblue;
  --bell-color: red;
}
html, 
body {
  background-color: var(--main-bg-color);
}
.bell {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  
  transition: all 0.5s;
}
.bell:hover {
  cursor: pointer;
}
.bell .bell-top {
  width: 50px;
  height: 50px;
  background: var(--bell-color);
  width: 50px;
  height: 50px;
  border-radius: 50% 50% 0 0;
  transition: color 0.15s;
}
.bell .bell-top:before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;  
  background: inherit;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}
.bell .bell-top:after {
  content: "";
  border-bottom: 10px solid var(--bell-color);
  border-left: 10px solid var(--main-bg-color);
  border-right: 10px solid var(--main-bg-color);
  height: 0;
  width: 50px;
  position: absolute;
  left: -10px;
  bottom: -10px;
}
.bell .bell-bottom {
  width: 20px;
  height: 16px;
  background: var(--bell-color);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -18px;
  border-radius: 0 0 16px 16px;
  transition: color 0.15s;
}
.bell-top-ring {
  animation: ringTop 4s .7s ease-in-out infinite;
  transform-origin: top;
}
.bell-bottom-ring {
  animation: ringBottom 4s .7s ease-in-out infinite;
}
@keyframes ringTop {
  0% {
    transform: rotate(0deg);
  }
  7.5% {
    transform: rotate(25deg);
  }
  30% {
    transform: rotate(-25deg);
  }
  45% {
    transform: rotate(15deg);
  }
  58% {
    transform: rotate(-10deg);
  }
  70% {
    transform: rotate(5deg);
  }
  87.5% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes ringBottom {
  15% {
    transform: translateX(-25px) rotate(7deg);
  }
  32.5% {
    transform: translateX(10px) rotate(-7deg);
  }
  50% {
    transform: translateX(-15px) rotate(7deg);
  }
  65% {
    transform: translateX(5px) rotate(-7deg);
  }
  80% {
    transform: translateX(-15px) rotate(7deg);
  }
  90% {
    transform: translateX(0px) rotate(-7deg);
  }
}

let bell, root;

window.addEventListener('load', load);

function load() {
  root = document.querySelector(':root');
  bell = document.querySelector('.bell');
  bell.querySelector('.bell-top').classList.add('bell-top-ring');
  bell.querySelector('.bell-bottom').classList.add('bell-bottom-ring');

  bell.addEventListener('click', toggleBell);
}

function toggleBell(e) {
  if (e.target.classList.contains('bell-top-ring') ||
      e.target.classList.contains('bell-bottom-ring')) {
    bell.querySelector('.bell-top').classList.remove('bell-top-ring');
    bell.querySelector('.bell-bottom').classList.remove('bell-bottom-ring');
    root.style.setProperty('--bell-color', 'white');
  } else {
    bell.querySelector('.bell-top').classList.add('bell-top-ring');
    bell.querySelector('.bell-bottom').classList.add('bell-bottom-ring'); 
    root.style.setProperty('--bell-color', 'red');
  }
}