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

Onclick event animacja w CSS

0 głosów
206 wizyt
pytanie zadane 14 maja 2018 w JavaScript, jQuery, AJAX przez anna135B Początkujący (270 p.)

Zaczynam zabawy z JS i potrzebuję pomocy:

Próbuje dodać onclick event, który spowoduje, że po kliknięciu na obrazek wykona obrót 360stopni. Kombinuje w JS ale wydaje mi się, że pomijam jakiś istotny element w zapisie. Będę wdzięczna za podpowiedź, jak rozwiązać mój problem.Tutaj pokazuje moją próbę: 

Struktura html : 

<div class="animated-icon" id="svg_animation">
         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="104" height="104" viewBox="0 0 104 104">
                        <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
                        <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c140 79.160451, 2017/05/06-01:08:21        ">
                           <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
                              <rdf:Description rdf:about=""/>
                           </rdf:RDF>
                        </x:xmpmeta>

                        <?xpacket end="w"?></metadata>
                    <image id="Vector_Smart_Object" data-name="Vector Smart Object" width="104" height="104" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAABoCAQAAAC3FX0qAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfiBQgSETNpp4KuAAADzUlEQVR42u3bMU/bQBTA8eeqEwkSA8yoU6V+ABhRpYxkjRgzMFRdyNaZCYbuVGKJUIZsKFKnDGRnY0FUDI3EF6hUxACIf4dcIkIc39k5O/eser3z3f1i+/zu+SJSwEHECSdERfRVFAcoCWnCKQdpiqOf9IpzwYV60hRnhRXlpGmOiIhq0ixHNSmeo5Y0n6OSlMxRR7JzVJHcOGpI7hwVpHSc4EnpOUGTsnGCJWXnBEriODsnQNKinMBIPjgBkXxxAiH55ARA8s1ZMikPjh9SppM4lm8iIjKQ3eghseaafJQPUpWqiNzLvfyWX9GfZJL8lM8iIvJDvkb4/LnmchwWCOs06XBH3HFHhybr80mF3ng2DhF1ejxhO57oUY8fcIGkZA4RDa6mhv3CkD5dTjmlS58hL1PlVzTihlwQycL5xODVUG84okZlplaFGkfcvKo54NNSSEkcIlo8mvJn2mxZW9uizbM545HW7KBzJiVyKpxPfu8zNp3b3ORsct55zNXMj5TI2eDSlN6yk7rlHW7N2ZdsFESycK5NaZfVTK2v0jUtXBdCstxs46tzuFAfh5OrlPeNZ5kKxs/OwcL9HEyepTynB8tE3fJxdSatja9SK6bMD8n63hlN1F0fHBER8yw95vReskYFAzOzZZoKYntcNTPeIIfowRqzNUx56ok6sdcd02ojtjQ7ySEEHcVsZz45IiLmVXvlNWy1LxComyDHOSpw7nvTBET1OeXpSU7rnR4Abd8cERHaAPTmlqcjOS7fRusdawiaCbQFwJOXJaBbroAmADd5cEREzOKimVDDjeSa+qADwFFuoCMAOol17CT3TI7JFdRyA9UAuLPUSial4KwB8DIbRnoDVcxCfS0zKU2ejW0AhnlxREQYArBtrRdPSpc2ZA+Afq6gPgB7DjVnSWmzoOz7DUlj+xiFqftOdadI792zoJOjKiIif/MEmdarLlWjB3ZNtvWLyLtch7Wco1y3XAZS8JNCWpKCaTsdScWLNSVJQ+iThqQkOHUnqVk+uJIULfCcSXqW4G4kVUkSF5KyNJYTSVei0U5Slwp2IGlL1juQtH1OsZEUfvCykvR9krSS9H00diBp+6xvJenbeGEl6dsaYyMp3LzkQNK2vcxOUrcB0IUksswtmv830Y5J9quUqd1y7dwu2d76kv37IQCOT1IgHF+kgDg+SIFxFiUFyFmEFCgnKylgThZS4Jy0JAWcNCQlHFeSIo4LSRnHRlLISSIp5cwjKebEkZRz3pJKwHlDGnO+K+ZMkUbH8bLH45dUBs4rUlk4hlQQ5x/IZIjhAKEA4QAAAABJRU5ErkJggg=="/>
           </svg>
 </div>

CSS :

.animated-icon svg {
    -webkit-animation: clockwiseSpin 1s ease;
    animation: clockwiseSpin 1s ease;
    
}

@-webkit-keyframes clockwiseSpin {
	0%  {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
    
}

@keyframes clockwiseSpin {
	0%  {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}

}

I JS 

var img = document.getElementById('svg_animation');

function startAnimation() {
    img.classList.add('animated-icon');
}

function eventHandler() {
    img.addEventListener("click", startAnimation, false)
}

img.onclick = eventHandler;

Pozdrawiam!

1 odpowiedź

0 głosów
odpowiedź 14 maja 2018 przez rafal612b Nałogowiec (43,180 p.)
wybrane 14 maja 2018 przez anna135B
 
Najlepsza

W HTMLu masz już klase (animated-icon) która chcesz dodać. Usuń klase z kodu HTML. 

W JavaScript jest troszkę namotane. Na starcie dodajesz uruchomienie funkcji eventHandler po kliknięciu w obrazek. Potem gdy klikasz w obrazek dodajesz kolejną funkcje która ma sie uruchomić po kliknięciu w obrazek. Za drugim kliknięciem dopiero zadziała całość. JSy wystarczy przerobić do postaci : 

var img = document.getElementById('svg_animation');
 
function startAnimation() {
    img.classList.add('animated-icon');
}
 
img.addEventListener("click", startAnimation, false)

 

addEventListener jest lepszym rozwiązaniem niż przypisywanie funkcji do img.onclick. addEventListener jest w stanie dodać np kilka funkcji do jednego znacznika poprzez img.onclick można usunąć sobie wcześniej przypisane funkcję.

 

Plus za pisanie w czystym JavaScript na start oraz zrobienie całości na animacjach CSS które są o wiele lepsze niż wyliczenie animacji po staremu przez JSy

komentarz 14 maja 2018 przez anna135B Początkujący (270 p.)
Bardzo dziękuję za odpowiedź, rzeczywiście teraz działa, jednak co zrobić żebym mogła klikać w ten obrazek wiele razy? Bo teraz mogę kliknąć tylko raz po przeładowaniu strony.

Czy mam zrobić to poprzez usunięcie klasy i ponowne jej dodanie?

Dodatkowo po klinięciu obrazek ucieka ze swojej pozycji, czym to jest spowodowane?
2
komentarz 14 maja 2018 przez JSHolic Szeryf (78,320 p.)

jednak co zrobić żebym mogła klikać w ten obrazek wiele razy?

+

 Czy mam zrobić to poprzez usunięcie klasy i ponowne jej dodanie? 

Tak. W img.classList.add('animated-icon') zamień metodę add na toggle.

Podobne pytania

0 głosów
1 odpowiedź 87 wizyt
0 głosów
2 odpowiedzi 76 wizyt
0 głosów
2 odpowiedzi 129 wizyt
Porady nie od parady
Forum posiada swój własny chat IRC, dzięki któremu będziesz mógł po prostu pogadać z innymi Pasjonatami lub zapytać o jakiś problem. Podstrona z chatem znajduje się w menu pod ikoną człowieka w dymku.IRC

63,266 zapytań

109,521 odpowiedzi

228,793 komentarzy

43,505 pasjonatów

Przeglądających: 158
Pasjonatów: 2 Gości: 156

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...