• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Zdjęcie animacji poprzez javascript

VPS Starter Arubacloud
+1 głos
287 wizyt
pytanie zadane 14 stycznia 2022 w JavaScript przez Jacek Śmiel Użytkownik (510 p.)

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.

1 odpowiedź

+1 głos
odpowiedź 14 stycznia 2022 przez VBService Ekspert (251,210 p.)
wybrane 15 stycznia 2022 przez Jacek Śmiel
 
Najlepsza

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';

 

komentarz 16 stycznia 2022 przez Jacek Śmiel Użytkownik (510 p.)

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%

komentarz 16 stycznia 2022 przez VBService Ekspert (251,210 p.)

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

 

Podobne pytania

0 głosów
0 odpowiedzi 127 wizyt
pytanie zadane 17 października 2017 w JavaScript przez rafal.budzis Szeryf (85,260 p.)
0 głosów
0 odpowiedzi 262 wizyt
+1 głos
1 odpowiedź 983 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...