Verbessere deine private Website: So animierst du einen Like-Button

1. Einführung: Was lässt eine Website gut aussehen? Wie können Sie Animationen nutzen, um besser mit Ihrem Publikum zu interagieren? Was ist in der Gestaltung und intuitive Benutzeroberfläche beteiligt. Willkommen bei Learn By Doing: Animieren einer Like-Schaltfläche In diesem Kurs lernen wir, wie wir eine einfache Schaltfläche zu einem animierten machen können. Hallo, mein Name ist Jude sub und ich mache Websites und glatte UI seit über acht Jahren. Wir werden gemeinsam lernen, wie man HTML, CSS und JavaScript verwendet, um lustige Mikrointeraktionen und coole UI zu machen. Wenn wir fertig sind, werden wir gelernt haben, wie benutzerdefinierte Schriftarten Symbole zu verwenden, auf Benutzerklick zu hören und das DOM zu manipulieren, um unsere coolen Animationen anzuzeigen. Das heißt, Sie sollten einige sehr grundlegende Kenntnisse in HTML, CSS und JavaScript haben. Aber keine Sorge, ich führe dich entlang der Wegstrecke. Lasst uns damit anfangen. Lassen Sie uns genial UI es zerquetschen. 2. Herunterladen von VS-Code: Bevor wir beginnen, laden wir einen Texteditor herunter. Ich mag VSCode, Sie werden hier oben sehen, ich habe eine zur Verfügung. Lassen Sie uns voran und öffnen Sie unseren Browser und geben Sie in der Suchleiste Visual Studio-Code ein. Jetzt gehen Sie weiter und klicken Sie auf diesen Link. Jetzt verwende ich Windows, aber wenn Sie Mac oder ein anderes Betriebssystem verwenden, zögern Sie nicht, die Binärdateien herunterzuladen, die für das Betriebssystem geeignet sind, also klicken Sie einfach hier und dort haben Sie es. Jetzt gehen Sie weiter und klicken Sie auf „Download“ und Download sollte angezeigt werden. Ich werde diesen Setup-Prozess nicht durchlaufen, weil ich bereits einen zur Verfügung habe. Wieder, fühlen Sie sich frei zu tun hop entlang und kommen Sie mir, wir verwenden Visual Studio Code. Wir sehen uns im nächsten Video. 3. Live-Server einrichten: Nun, da wir Visual Studio-Code installiert haben, lassen Sie uns fortfahren und anpassen. Eine der Möglichkeiten, wie Sie dies tun können, ist die Suche nach diesem kleinen Knopf namens Extensions. Wir werden einen namens Live Server hinzufügen. Geben Sie bei der Suche Live Server ein, und oben rechts hier, lassen Sie uns die Installationsschaltfläche voran. Es kann ein wenig dauern, aber sobald es fertig ist, möchten Sie den Reload-Button hier drücken. Was Live Server tut, ist es uns erlaubt, lokal zu entwickeln und zu sehen, dass sich Dinge sofort in unserem Browser ändern. Ziemlich raffiniert. 4. So startest du einen Live Server: Großartig. Jetzt, da wir Live Server installiert haben, gehen wir weiter und sehen, wie es funktioniert. Lass es uns erforschen. Sie werden feststellen, dass es nach unserem Arbeitsbereichsordner fragt. Also lassen Sie uns voran und fügen Sie eins hinzu. Ich habe bereits einen Skillshare Ordner in meinen Dokumenten erstellt so dass Sie jede Struktur haben können, die Sie wollen, aber ich werde dies verwenden und es sagt, es ist Skillshare. Ich werde eine neue Datei hinzufügen und wir werden diese index.html nennen. Jetzt ist VS Code mit Emmet ausgestattet. Also lasst uns das benutzen. Wir werden html:5 eingeben und „Enter“ drücken. Jetzt haben wir eine Kochplatte HTML tragen, die uns kostenlos gegeben wird. Gehen Sie voran und tippen Sie jetzt, Hallo, Welt und drücken Sie „Speichern“. Wir werden auf jetzt klicken „Ansicht“ Befehlspalette, und dann öffnen Sie live und Sie werden feststellen, dass es für uns bereits automatisch abgeschlossen ist. Server, öffnen Sie mit Live Server. Sie werden feststellen, dass wir jetzt einen Live Server unserer lokalen Entwicklung haben. Lassen Sie mich das wirklich schnell minimieren, nur ein bisschen mehr. Großartig. Eine Sache, die Sie tun können, ist eingeben, Dies ist ein Test, und drücken Sie erneut „Speichern“. Beachten Sie, dass die Änderungen sofort angezeigt werden, ohne auf „Aktualisieren“ klicken zu müssen, das ist eine raffinierte Funktion. Lassen Sie mich voran und tippen Sie in h2, Das ist cool. Klicken Sie auf „Speichern“. Sie werden feststellen, dass Live Server die Änderungen aufnimmt, und deshalb empfehle ich, Live Server für die lokale Entwicklung zu verwenden. 5. Eine Grundlegende Schaltfläche hinzufügen: Für das erste Projekt möchte ich etwas mehr Zeit damit verbringen, meinen Denkprozess zu beschreiben, wenn ich ein Designproblem angehe. Eine Sache, die wir wissen, ist, dass ein Like-Button technisch ein Checkbox ist. Lassen Sie uns voran und machen Sie einfach ein grundlegendes HTML. Wir werden tun, ist dies loswerden und ich gebe weniger als Zeichen, Eingabe, Typ gleich Anführungszeichen, „Kontrollkästchen“ ein. Wir werden es schließen, indem Sie einen Schrägstrich und dann ein Größer-als-Zeichen hinzufügen. Wenn wir jetzt auf „Speichern“ klicken, werden Sie feststellen, dass alles, was wir bekommen, ein Kontrollkästchen ist, aber das ist nicht ziemlich beschreibend; wofür ist das Kontrollkästchen? Lassen Sie uns voran und fügen Sie hinzu, Wie wir und dann drücken Sie „Speichern“. Jetzt wissen wir, warum das Kontrollkästchen da ist, und während es sehr einfach ist, die nächsten paar Videos werden wir es stylen und es einige Funktionalitäten hinzufügen. 6. Wie du das Thema Button mit der Fallstudie: Für unser erstes Projekt werden wir ganz einfach anfangen. Wir werden Instagram's Like Button als Inspiration betrachten, wenn Sie darauf klicken, wird es rot und es füllt das Herz. Das ist ein wirklich gutes visuelles Feedback. Aber was wäre, wenn Sie es tatsächlich animieren und pulsieren könnten, wenn der Benutzer darauf klickt. Das ist es, was wir versuchen werden. Wir werden HTML, CSS und JavaScript verwenden, so dass, wenn der Benutzer darauf klickt, es pulsiert. Wenn Sie keine dieser Technologien berührt haben, könnte es ein wenig entmutigend klingen. Aber mach dir keine Sorgen, deswegen bin ich hier. Wir sehen uns im nächsten Video. 7. Ein externes Stylesheet hinzufügen: Großartig. Jetzt, da wir unseren Normalisierer haben, können wir jetzt ein CSS haben, das in allen unseren Browsern konsistent ist. Eine andere Sache, die wir jetzt tun müssen, ist, tatsächlich den Stil hinzuzufügen. Lass uns weitermachen und das tun. Sie werden feststellen, dass wir eine neue Datei erstellen und wir die style.css aufrufen. In unserer style.css werde ich voran gehen und eine einfache Regel für HTML machen und es wird die Farbe zu Tomaten ändern. Alles klar, und danach werden wir „Speichern“ drücken und zu unserer Index.html wechseln, und ich werde das kopieren und wir müssen sicherstellen, dass wir es nicht normalisieren, sondern style.css nennen. Sobald Sie tun und drücken Sie „Speichern“ Sie werden feststellen, dass die Farben in der Tat zu Tomaten ändern. Sie werden feststellen, dass ich style.css tatsächlich unter normalize.css platziert habe. Das ist wirklich wichtig, weil Sie normalisieren wollen tatsächlich zuerst und dann unsere Stile normalisieren. 8. Schriftarten für Symbole für Symbole verwenden: In welchem Design gibt es mehrere Möglichkeiten, Dinge zu tun. Eine der Möglichkeiten, wie wir ein Herz hinzufügen könnten, war durch CSS, aber ich werde nur einen neuen Ordner erstellen und wir werden eine Schriftart verwenden. Erstellen wir ein Schriftverzeichnis, und Sie werden feststellen, dass hier nichts drin ist, und wir haben vor, eines von mir zu bekommen, wie mein Fontello. Gehen Sie weiter und geben Sie Fontello in Ihre Suchleiste ein. Sie werden feststellen, dass es ein wenig braucht, um zu laden. Es gibt eine Schriftart Awesome Font, und Sie werden diese beiden bemerken. Da ist ein Herz und das Herz leer. Ich gehe voran und wähle diese beiden aus und lade sie herunter. Ich muss nicht die ganze Font Awesome herunterladen, und Sie werden feststellen, dass es innerhalb des ZIP-Laufwerks ist, und ich werde voran gehen und durch den Visual Explorer öffnen und mit der rechten Maustaste darauf klicken und im Explorer offenbaren drücken. Sie werden hier feststellen, dass wir ein Verzeichnis haben, das in der gleichen Linie ähnlich ist. Ich werde voran gehen und diese in meinen Schriftordner ziehen, und Sie werden feststellen, dass es dort ist. Gehen wir zurück zu Skill Share und schlagen CSS. In unserem Zip-Laufwerk werde ich den CSS-Ordner treffen, und ich brauche diesen hier einfach und verschieben Sie ihn zu Ihnen, CSS, und Sie werden bemerken, dass ich alle drei jetzt habe. Perfekt. Lassen Sie mich voran gehen und schließen Sie diese beiden, und Sie werden im Schriftverzeichnis feststellen, dass es tatsächlich leer ist. Stellen Sie sicher, dass Sie diese Schaltfläche Aktualisieren drücken, und da geht's los. Alles ist korrekt gefüllt. Gehen wir weiter und öffnen Sie unser Fontello CSS. Sie werden all diese CSS bemerken, die wir kostenlos erhalten. Es verweist auf die Schriftdateien und es geht nach unten. Dies sind die Klassen, an die Sie sich erinnern müssen, wenn wir tatsächlich die Herzsymbole deklarieren. Gehen wir zurück zu index.html und wir müssen darauf verweisen, weil es ein externes CSS ist. Ich werde voran gehen und es durch die Emmett-Abkürzung einschließen, und es ist im aktuellen Verzeichnis, CSS-Ordner, und der Name ist fontello.css, lassen Sie mich voran und drücken Sie speichern. Du wirst nicht sofort etwas sehen. Wir müssen ein I-Tag hinzufügen und gehen Sie voran und geben Sie in Klasse gleich Doppelpunkt. Wir werden dieses Symbol Strich Herz nennen, und wieder, das ist Referenzen die fontello.css, und Sie werden feststellen, hier drüben haben wir alle drei. Nun, wenn wir das leere wollen, gehen wir einfach voran und tun Symbol Herz leere Hopfen, falsch geschrieben, dass T, entfernen Sie das andere T, drücken Sie speichern, und da gehst du. Wir sehen beide Herzen, das Gefüllte und das Leere. Auch hier habe ich die Schriftroute gewählt. Es gibt viele andere Möglichkeiten, wie Sie dies hätten tun können, aber ich fühlte, dass die Schriftroute am einfachsten war. Cool. Wir sehen uns in der nächsten. 9. Mit CSS ein Herz „pulsieren“: Bisher eine Menge von dem, was wir getan haben, war es nur rein Setup-Arbeit. Aber jetzt sind wir bereit, wir haben Fontello, wir haben unsere normalisiert, und wir haben unsere style.css. Lassen Sie uns voran und entfernen Sie den Eingabetyp. Was wir jetzt tun wollen, ist ein Container zu erstellen. Lassen Sie uns ein div erstellen und eine Klasse namens Container erstellen. Großartig. Was wir tun werden, ist, diese Jungs in unseren div-Container zu verschieben, der ein wenig formatiert ist. Es sieht ein bisschen sauberer aus. Okay, repariere das kleine bisschen, und hier ist, naja, großartig. Jetzt ist alles ausgerichtet und wir werden Speichern treffen. Sie werden feststellen, dass der Index gut aussieht. Wir haben eine Container-Klasse erstellt, also wechseln wir zu style.css, und lassen Sie uns dies entfernen. Was wir tun werden, ist diese Container-Klasse zu erstellen und eine Anzeige, einen Flex hinzuzufügen. Sobald Sie auf Speichern klicken, werden Sie feststellen, dass eine rote Tomate weg ist, aber wir gehen weiter und ändern auch unser Symbol Herz, so dass, wenn Sie die Farbe Tomate wieder hinzufügen, werden Sie feststellen, dass wir das gefüllte Herz haben und es innen Symbol Herz und beachten Sie unsere Farben gibt, toll. Jetzt werden wir einen pulsierenden Effekt hinzufügen. Lassen Sie uns eine Klasse namens Puls erstellen, und wir werden die Animation hinzufügen und der Name wird Puls sein. Die Dauer, wir machen es 0,3 Sekunden, und wir werden es unendlich laufen lassen. Wir können alles andere hier entfernen, großartig. Was wir tun wollen, ist diese Impulsanimation zu erstellen, lassen Sie uns einen Keyframe an Keyframes hinzufügen, und wir werden es Impuls nennen. Hoppla, befreien Sie sich von dieser Zeit. Innerhalb unserer geschweiften Klammern werden wir einen Prozentsatz hinzufügen. Beginnen wir mit null Prozent, und im Grunde werden wir transformieren: scale hinzufügen. Wir werden es auf eins setzen lassen, vergessen Sie nicht das Semikolon. Wir werden es für die exakt gleiche Transformation beenden. Lassen Sie uns weiter und fügen Sie Transformation wieder hinzu und skalieren Sie sie auf eins. Aber dazwischen werden wir bei 50 Prozent haben. Gehen wir weiter und fügen 50 Prozent hinzu, und wir werden das ein bisschen ändern. Lassen Sie uns wieder transformieren, Doppelpunkt-Skala, und dieses Mal werden wir tun 1,3 Semikolon. Du wirst bemerken, dass ich gerade „Speichern“ geklickt habe, aber selbst mit meiner Pulsanimation passiert nichts. Wir haben uns auf die Unendlichkeit gesetzt, aber beachten Sie unsere Klasse hier für das Auge, es heißt Icon-Herz, aber was wir tun müssen, ist Impuls hinzuzufügen. Lass uns das tun, und da hast du es, es pulsiert jetzt, weil wir die Pulsklasse zu unserem i-Tag hinzugefügt haben. Gehen wir voran und machen das jetzt in unserem Index. Ich füge Puls hinzu, drücke Speichern, und da hast du ein pulsierendes Herz. Dies wird eine wichtige Lektion für das Animieren in den zukünftigen Videos sein. Wir sehen uns in der nächsten. 10. Wie du den DOM manipulierst.: Das nächste, was wir tun möchten, ist das DOM zu manipulieren. Mit DOM meine ich das Document Object Model. Wir werden dieses kleine Herz gezielt anvisieren wollen. Wie machen wir das? Nun, wir werden JavaScript brauchen. Eine der wenigen Möglichkeiten, wie Sie dies tun können, ist mit der rechten Maustaste und drücken diese „Inspect“ oder Strg+Umschalt+I oder Befehl+Umschalt+I, und Sie werden feststellen, dass es diese Konsolenschaltfläche gibt. Dies ermöglicht es uns, einige JavaScript-Ziel einzugeben. Lasst uns zuerst herausfinden. Wir nennen dieses Ikonen-Herz, und wir werden auf „Console“ klicken und wir werden Document.QuerySelector eingeben. Vergewissern Sie sich, dass das S groß geschrieben ist. Öffnen Sie paren, einfaches Anführungszeichen, Punkt, weil es eine Klasse ist, die wir Ziel, Ikon-Herz, und Ende Anführungszeichen und Klammern. Sehen Sie, wir haben jetzt einen Verweis auf unsere Icon-Herzklasse. Dies wird die Grundlage dafür sein, wie wir JavaScript verwenden können, um das DOM zu ändern. Sie können sogar hier voran gehen und auf den kleinen Pfeil klicken und Sie werden sehen, dass das gesamte DOM aufgeführt ist. Was wir tun wollen, ist die Pause zu entfernen. Ich werde es direkt tun und Sie werden feststellen, dass die Animation stoppt. Jetzt wissen wir, wie man auf das DOM verweist. Dies wird für das nächste Video von entscheidender Bedeutung sein, in dem wir JavaScript verwenden, um es zu entfernen. 11. Einen externen Javascript hinzufügen: Dieses Mal möchte ich darüber sprechen, wie wir JavaScript extern hinzufügen können. Zuvor haben wir über DOM-Manipulation gesprochen und wie wir das über JavaScript machen können. Wir werden damit beginnen, das erste Symbol zu entfernen. Jetzt haben wir das leere Herz verlassen. Wir werden ein Skript-Tag hinzufügen wollen, aber wir werden es direkt über dem End-Tag hinzufügen. Element hat dies wieder verfügbar, aber Sie können es den ganzen Weg eingeben. Bevor wir etwas eingeben, müssen wir tatsächlich einen Ordner erstellen. Wir werden es Scripts nennen. Inside Scripts werden wir eine neue Datei erstellen und wir werden diese main.js nennen. Ich werde etwas wirklich Einfaches tun, console.log ('das ist Java-Skript! ') und ich werde das retten. Wir gehen zurück zu unserer index.html. Jetzt, wo wir einen Ort haben, auf den wir verweisen können, werden wir uns das aktuelle Verzeichnis ansehen und es ist in Scripts. Es heißt main.js und klicke auf „Speichern“. Nichts sollte sich ändern. Ich werde „Konsole“ drücken. Da gehst du. Wir haben jetzt einen Verweis auf diese main.js, weil wir es in unserer index.html hinzugefügt haben. 12. Ein Grundlegendes Herz umschlagen: In dieser Lektion werden wir alles, was wir bisher gelernt haben, in einem zusammenfassen. Im Moment wollen wir, dass dieses Herz umschaltet. Derzeit ist es leer, aber wenn wir den leeren Modifikator entfernen, haben wir jetzt das volle Herz. Nun, wir könnten definitiv das Symbol Herz leer anvisieren, aber das wird uns einige Probleme bereiten. Ich möchte ein JS-Herz erstellen. Was uns dies ermöglicht, ist das Ziel, ohne sich Gedanken über das eigentliche Klassensymbol zu machen. Wir sind wieder bei unserem Hauptjs, ich werde die Konsolenaussage loswerden und einen Verweis auf unser HeartDom gleich document.querySelector ( 'js-heart ') erhalten document.querySelector ( ; wieder werde ich es nur ein bisschen verschieben. Der Grund, warum wir dies tun, ist, dass wir einen Verweis auf das HeartDom erhalten wollen, und ich werde einen Kommentar dazu schreiben. Großartig. Das nächste, was wir tun möchten, ist ein Ereignis-Listener hinzuzufügen. Lassen Sie uns einen kurzen Kommentar schreiben, einen onclick Listener erstellen, und dann werden wir das HeartDom hinzufügen, und wieder haben wir die Referenz davon. Gehen Sie mit der.on-click= (event) =>, das gleich größer als Zeichen ist, und dann einer geschweiften Klammer, und wenn Sie es nicht wussten, ist dies die ES6-Art, eine Funktion zu schreiben. Das nächste, was wir brauchen, ist eine gemochte Variable, um zu überprüfen, ob der Benutzer es vorher gemocht hat oder nicht. Lasst uns voran gehen und das jetzt erschaffen. Lassen Sie mochte gleich falsch. Grundsätzlich initialisieren wir es auf „false“. Lasst uns einen Kommentar dazu schreiben. Wir werden sagen, initialisiert auf falsch. Wahrscheinlich hilft, ein wenig beschreibender zu sein, initialisiert wie falsch. Insbesondere ist dies der Fall, wenn der Benutzer nicht ausgewählt hat. Großartig. Jetzt, da wir die gemochte Variable erstellt haben, wenn der Benutzer darauf klickt, möchten wir, dass die gemochte Variable tatsächlich umkippt. Wie haben wir das gemacht? Wir fügen das Ausrufezeichen hinzu und die Variable mochte wieder, im Grunde eine ausgefallene Möglichkeit, dergleichen umzuschalten. Sie daran, dass dies eine kleine kleine Möglichkeit ist, eine Variable zu spiegeln. Wie Sie hier sehen können, füge ich das Ausrufezeichen hinzu, das im Grunde das Gegenteil von dem bedeutet, was es derzeit ist. Als nächstes werden wir überprüfen, ob gefallen ist auf einen Truthy Wert gesetzt. Wir werden Target.ClassList haben. Stellen Sie sicher, dass das L großgeschrieben ist.remove ('icon-herz-leere'); wieder wird dies drehen, so dass wir das iconheart entfernen. Aber beachte das Ziel hier, ich werde das wirklich definieren. Wir haben target= Ereignis, aus dem Ereignisobjekt, Punkt currentTarget, die T für Target großgeschrieben. Die currentTarget gegen Eigenschaft des Ereignisobjekts, das wir vorwärts übergeben haben , und wir werden eine const tun, weil es sich nicht ändern wird. Lassen Sie uns ein bisschen beschreibender sein. Dieses Ziel ist im Grunde das, was wir angeklickt haben. Wir unterschreiben es hier. Lasst uns einen Kommentar dazu schreiben. Das ist, was wir angeklickt haben. Großartig. Auch hier verwenden wir ein Ziel, um das alte Symbol im Grunde zu entfernen und fügen wir ein neues mit ClassList hinzu. hinzufügen und jetzt müssen wir die Klasse definieren, die wir verwenden, die iconheart und great ist. Wir haben das leere entfernt und wir fügen das gefüllte hinzu. Wir brauchen jetzt das Gegenteil. Lassen Sie uns sonst geschweifte Klammern da drinnen machen. Wir werden tatsächlich diese beiden Zeilen kopieren und sie hier einfügen und ich sollte einfach das Entfernen in der Anzeige umdrehen. Lasst uns das machen. Entfernen wird jetzt hinzufügen und hinzufügen wird entfernt. Eine andere Sache, die ich gerne mache, ist konsequenter zu sein. Lassen Sie uns die Entfernenfunktion nach oben verschieben und die Anzeige befindet sich darunter. Jetzt ist es konsistent mit den vorherigen Anweisungen. Nur um sicherzustellen, dass wir verstehen, was los ist, werde ich einige Kommentare schreiben. Für den ersten Fall entfernen wir das leere Herz, wenn gewünscht, und fügen das volle Herz hinzu. Wir werden tatsächlich das Gegenteil tun, wenn der Benutzer es nicht gemocht hat. Gehen wir weiter und fügen Sie es hier ein und ändern Sie es in volles Herz. Wenn nicht gemocht, wollen wir das leere Herz hinzufügen. Perfekt. Nur für eine schnelle Überprüfung, Basis der beliebten Variablen, werden wir im Grunde die Herzen umschalten und das ist, was wir gerade getan haben. Lassen Sie uns auffrischen und, da funktioniert es. Jetzt ist es nicht wirklich gutes Feedback, weil ich wirklich möchte, dass der Cursor Ihnen einen Zeigerfinger zeigt. Was wir tun werden, ist, dass wir eine Herzklasse erstellen , die im Grunde in sich einen Cursorzeiger enthält. Lass uns das machen. Ich werde iconheart eingeben und mit einer geschweiften Klammer beginnen. Eigentlich lassen Sie mich mit Herz gehen und wir werden den Cursorzeiger eingeben und dies ermöglicht es uns zu unserer indizierten Datei zurückzukehren und wir werden in unserer Herzklasse hinzufügen. Jedes Mal, wenn wir es überrollen, werden wir einen Cursor-Zeiger sehen, wie dieser. Perfekt. Jetzt ist es wirklich gutes Feedback, denn jetzt kann ein Benutzer wissen, wenn ich den Mauszeiger darüber führe, kann ich es tatsächlich umschalten. 13. Das Herz mit JavaScript animieren: Nun, da wir in der Lage sind, ein Herz umschalten, was wir wirklich tun wollen, ist, dass es pulsiert, sobald ein Benutzer darauf klickt. Gehen wir voran und springen Sie auf unsere main.js. Die einfache Art, Dinge zu tun, ist wirklich, nur die Pulsklasse hinzuzufügen. Lasst uns das jetzt machen. Sie könnten versucht sein, die Pulsklasse zu entfernen, wenn sie nicht mehr hell ist. Aber es wird uns einen etwas unerwünschten Effekt geben. Sieh dir das an. Ich werde auf „Speichern“ klicken und zurück zu unserem Browser springen. Das ist nicht das, was wir wollen. Wir wollen nicht, dass es für immer pulsiert, wir wollen einmal darauf klicken und einen Puls haben. Was wir tun werden, ist gehen Sie voran und entfernen Sie den Puls, von dem wir dachten, würde es nach einem anders entfernen. Stattdessen werden wir mit dem HeartDom beginnen und anhängen und einen EventListener hinzufügen, und wir werden für ein Animationsende hören. Sobald die Animation beendet ist, möchten wir, dass das Herz die Pulsklasse entfernt. Lassen Sie uns voran und übergeben Sie in der Veranstaltung über die Pfeilfunktion, und was wir tun werden, ist gehen Sie voran und zielen Sie das Ereignisobjekt. Dann wollen wir auf das aktuelle Ziel des Ereignisobjekts zugreifen, und was wir tun möchten, ist die Pulsklasse zu entfernen. Lassen Sie uns das tun, .ClassList.remove, und wir werden in Puls eingeben, weil das die Klasse ist, die wir aus dem DOM entfernen möchten. Großartig. Gehen wir weiter und kommentieren das. Lassen Sie uns die Pulsklasse eintippen, sobald sie fertig ist. Großartig. Lassen Sie uns auf „Speichern“ und überprüfen Sie es. Warte, was ist hier los? Nun, wenn Sie zu unserer style.css zurückgehen, werden Sie feststellen, dass sich unsere Pulsklasse tatsächlich auf unendlich gesetzt hat. Lassen Sie gehen und entfernen Sie das, speichern und versuchen Sie es noch einmal. Perfekt. Es pulsiert genau einmal. Wenn Sie sich den DOM-Inspektor ansehen, werden Sie feststellen, dass schnell die Pulsklasse blinkt und sich dann selbst entfernen, und das liegt daran, dass wir den EventListener an das HeartDom anhängen das Animationsende hören. Dies wird die Grundlage für viele unserer Animationen in der Zukunft sein. Gute Arbeit beim ersten Projekt. 14. Schlussbemerkung: Dieses Animations-Tutorial war ganz einfach. Allerdings können die Prinzipien der Ausrichtung einer Kuppel, Hinzufügen eines Ereignis-Listener für die Animation Ende und Hören der Interaktion eines Benutzers wie ein Klick verwendet werden, um komplexe Animationen zu erstellen. Ich hoffe, das war hilfreich für Sie.