Onclick event animacja w CSS

Question

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!

Answer 1

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

Comments

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?

---

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.