• 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
256 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 (46,000 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 (79,520 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ź 98 wizyt
0 głosów
2 odpowiedzi 102 wizyt
0 głosów
2 odpowiedzi 131 wizyt
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

65,755 zapytań

112,393 odpowiedzi

237,318 komentarzy

46,700 pasjonatów

Przeglądających: 126
Pasjonatów: 0 Gości: 126

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.

...