Vanilla JS-Effektmethoden

In der Vergangenheit habe ich viel mit jQuery gearbeitet und das, was ich an jQuery liebe, ist, dass es viele nützliche Methoden mit einfacher und leichter Syntax bietet. Eine der am häufigsten verwendeten jQuery-Methoden sind Effektmethoden, die zum Erstellen von Animationseffekten für Websites verwendet werden.

Zum Beispiel:

• hide() / show()
• toggle()
• fadeIn()
• fadeOut()
• ...

W3schools hat hier alle JQuery-Effektmethoden aufgelistet

Aber jetzt, da unzählige JS-Bibliotheken wachsen, scheint jQuery veraltet zu sein, und in einigen Projekten müssen Entwickler jQuery-Code durch reines JS ersetzen.

Es ist mühelos, die Funktion genauso zu erstellen wie hide() / show(), bearbeiten Sie einfach den Anzeigestil

element.style.display = 'block' // or none

aber bei komplexeren Effekten wie fadeIn()/fadeOut() müssen wir mehr Code schreiben.

Ein weiteres Problem bei der Schreibeffektmethode in Vanilla JS ist die ausführliche Syntax. Das sieht man an der jQuery-Methode:

$(".myClass").slideDown();

Es ist sehr lesbar und intuitiv, Sie finden das Element mit dem jQuery-Selektor und rufen dann die slideDown-Methode als Methode des Elements auf.
Der Code implementiert die gleiche Funktion in Vanilla JS, wenn Sie vorher die slideToggle-Methode definieren:

const element = document.querySelector(".myClass");
slideToggle(element);

Wenn Sie das Element abfragen und es dann an die Funktion slideToggle() übergeben, erscheint es weniger nativ und weniger lesbar als das Beispiel mit jQuery.

Der Trick hier besteht darin, HTMLElement.prototype zu verwenden, um dem HTML-Element eine Methode hinzuzufügen, und Sie können die Effektfunktion als Methode des HTML-Elements verwenden. Der Einfachheit halber definieren wir die Methode hide():

HTMLElement.prototype.hide = function() {
  this.style.display = 'none'
}

document.querySelector(".myClass").hide()

Zu Wiederverwendungszwecken habe ich hier einige Vanilla-JS-Methoden für Effekte erstellt. Platzieren Sie es einfach irgendwo in Ihrer Codebasis und verwenden Sie es als native Methode des HTML-Elements.

Das obige ist der detaillierte Inhalt vonVanilla JS-Effektmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!