So erfassen Sie CSS3 -Animationsereignisse in JavaScript

Schlüsselpunkte

• JavaScript kann CSS3 -Animationen verwalten, indem Ereignishandler zu Elementen hinzugefügt werden, wodurch eine feine Steuerung von Animationen ermöglicht wird, z. B. das Abspielen von Sequenz. Es gibt drei Arten von Ereignissen, die erfasst werden können: "AnimationStart", "AnimationItration" und "Animationend".
• Cross-Browser-Kompatibilität dieser Animationsereignisse kann durch Aufrufen von addEventListener für alle vorangestellten und nicht fixierten Namen mit benutzerdefinierten Funktionen erreicht werden. Auf diese Weise kann der Ereignishandler mithilfe einer Codezeile zugewiesen werden.
• Das an die Animations -Listener -Funktion übergebene Ereignisobjekt liefert den Animationsnamen und verstrichene Zeit seit Beginn der Animation. Dies kann verwendet werden, um festzustellen, wann eine bestimmte Animation endet, und andere Code auszuführen, z. B. die Anwendung einer anderen CSS3 -Animation in einer bestimmten Reihenfolge.

CSS3-Animationen sind reibungslos und einfach zu implementieren, aber im Gegensatz zu JavaScript hat sie keine Frame-by-Frame-Steuerung. Glücklicherweise können Sie Event -Handler auf jedes Element anwenden, um den Animationszustand zu bestimmen. Dies ermöglicht eine feine Steuerung, z. B. das Spielen verschiedener Animationen nacheinander.

Betrachten Sie diese einfache CSS3 -Animation:

#anim.enable {
  -webkit-animation: flash 1s ease 3;
  -moz-animation: flash 1s ease 3;
  -ms-animation: flash 1s ease 3;
  -o-animation: flash 1s ease 3;
  animation: flash 1s ease 3;
}

/* 动画 */
@-webkit-keyframes flash {
  50% { opacity: 0; }
}

@-moz-keyframes flash {
  50% { opacity: 0; }
}

@-ms-keyframes flash {
  50% { opacity: 0; }
}

@-o-keyframes flash {
  50% { opacity: 0; }
}

@keyframes flash {
  50% { opacity: 0; }
}

Wenn die enable -Klasse mit id anim auf ein Element angewendet wird, wird eine Animation mit dem Namen flash dreimal ausgeführt. Jede Iteration dauert eine Sekunde, in der das Element ausblendet und dann verblasst.

Drei Arten von Ereignissen werden ausgelöst, wenn die Animation auftritt:

animationstart

var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);

animationstart Ereignis wird abgefeuert, wenn die Animation zum ersten Mal gestartet wird.

animationiteration

anim.addEventListener("animationiteration", AnimationListener, false);

animationiteration Ereignisse werden zu Beginn jeder neuen Animations -Iteration abgefeuert, d. H. Jede Iteration mit Ausnahme der ersten Iteration.

animationend

anim.addEventListener("animationend", AnimationListener, false);

animationend Ereignis feuert am Ende der Animation ab.

Browserkompatibilität

Zum Zeitpunkt des Schreibens unterstützen Firefox-, Chrome-, Safari-, Opera- und IE10 CSS3 -Animationen und verwandte Ereignishandler. Zusätzlich verwenden die Browser von Opera, IE10 und Webkit Präfixe und haben einige Falländerungen vorgenommen, um Narrensicher zu gewährleisten ...

W3C Standard Firefox Webkit Opera IE10 animationstart animationstart webkitAnimationStart oanimationstart MSAnimationStart animationiteration animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration animationend animationend webkitAnimationEnd oanimationend MSAnimationEnd

addEventListener

var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
    for (var p = 0; p < pfx.length; p++) {
        if (!pfx[p]) type = type.toLowerCase();
        element.addEventListener(pfx[p] + type, callback, false);
    }
}

Die einfachste Möglichkeit, das Präfixproblem zu lösen Cross-Browser-Ereignis-Handler können jetzt mit einer Codezeile zugewiesen werden:

#anim.enable {
  -webkit-animation: flash 1s ease 3;
  -moz-animation: flash 1s ease 3;
  -ms-animation: flash 1s ease 3;
  -o-animation: flash 1s ease 3;
  animation: flash 1s ease 3;
}

/* 动画 */
@-webkit-keyframes flash {
  50% { opacity: 0; }
}

@-moz-keyframes flash {
  50% { opacity: 0; }
}

@-ms-keyframes flash {
  50% { opacity: 0; }
}

@-o-keyframes flash {
  50% { opacity: 0; }
}

@keyframes flash {
  50% { opacity: 0; }
}

Ereignisobjekt

Im obigen Code wird die Funktion AnimationListener aufgerufen, wenn ein Animationsereignis auftritt. Ein Ereignisobjekt wird als einzelner Parameter übergeben. Zusätzlich zu Standardeigenschaften und -methoden enthält es auch:

• animationName: CSS3 -Animationsname (d. H. flash)
• elapsedTime: Zeit (in Sekunden) seit Beginn der Animation.

Daher können wir erkennen, wann die flash -Animation endet, zum Beispiel:

var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);

kann der Code beispielsweise eine vorhandene Klasse entfernen oder eine andere CSS3 -Animation in einer bestimmten Reihenfolge anwenden.

CSS3 -Animationsereignis Demonstration in JavaScript

anzeigen

Auf der Demo -Seite wird eine Schaltfläche angezeigt. Wenn Sie darauf klicken, wird die Klasse "Aktivieren" umgeschaltet, wodurch die flash -Animation gestartet wird. Wenn das Animationsereignis ausgelöst wird, wird der Status in der Konsole angezeigt. Nachdem die Animation beendet ist, wird die Klasse "Enable" entfernt, damit die Schaltfläche erneut geklickt werden kann.

Wenn Sie in einem interessanten Projekt animierte Event -Capture verwenden, lassen Sie es mich bitte wissen.

(Wenn Sie gerne diesen Artikel lesen, werden Sie es lieben, lernbar zu sein. Hier können Sie neue Fähigkeiten und Fähigkeiten von Meistern lernen. Mitglieder können sofort auf alle E-Books und interaktiven Online-Kurse von SitePoint zugreifen, wie z. B. "HTML5 und" CSS3 für die reale Welt)

(Die Kommentare für diesen Artikel sind geschlossen. Gibt es Fragen zu CSS? Warum nicht in unserem Forum fragen?)

FAQs (FAQ) über CSS3 -Animationen und JavaScript -Ereignishandler

Was sind CSS3 -Animationen und JavaScript -Ereignis -Handler?

CSS3 -Animation ist eine Funktion von CSS3 (Cascading -Stylesheets), mit der Sie HTML -Elemente ohne Verwendung von JavaScript oder Flash animieren können. Es bietet eine Möglichkeit, einfache Animationen direkt im CSS -Code ohne zusätzliche Ressourcen zu erstellen. Auf der anderen Seite sind JavaScript -Ereignis -Handler Funktionen in JavaScript, die ausgelöst werden, wenn bestimmte Ereignisse auftreten. Diese Ereignisse können ein beliebiges Ereignis sein, z. B. ein Benutzer, der auf eine Schaltfläche klickt, das Laden von Seite oder eine Animation beendet. Verwenden Sie CSS3 -Animationen und JavaScript -Ereignishandler, um dynamische interaktive Webinhalte zu erstellen.

Wie verwendet ich JavaScript -Ereignis -Handler mit CSS3 -Animationen?

Um den JavaScript -Event -Handler mit CSS3 -Animationen zu verwenden, müssen Sie dem HTML -Element, das Sie animieren möchten, einen Ereignishörer hinzufügen. Dieser Ereignishörer löst die JavaScript -Funktion am Ende der Animation aus. Hier ist ein grundlegendes Beispiel:

anim.addEventListener("animationiteration", AnimationListener, false);

In diesem Code ist "Animationend" das Ereignis, das wir hören und das ausfeuert, wenn die CSS3 -Animation abgeschlossen ist.

Kann ich JavaScript -Ereignishandler mit CSS3 -Übergängen verwenden?

Ja, Sie können JavaScript -Ereignishandler mit CSS3 -Übergängen verwenden, genau wie Sie mit CSS3 -Animationen tun. Die Veranstaltung, auf die Sie sich anhören müssen, ist "Transitionend". Dieses Ereignis wird abgefeuert, nachdem der CSS -Übergang abgeschlossen ist.

Wie kann man JavaScript verwenden, um die Zeit von CSS3 -Animationen zu steuern?

Sie können JavaScript verwenden, um die Zeit der CSS3-Animation mit der Eigenschaft "Animation-Delay" zu steuern. Diese Eigenschaft legt die Verzögerung zu Beginn der Animation fest. Sie können diese Eigenschaft in JavaScript wie folgt festlegen:

#anim.enable {
  -webkit-animation: flash 1s ease 3;
  -moz-animation: flash 1s ease 3;
  -ms-animation: flash 1s ease 3;
  -o-animation: flash 1s ease 3;
  animation: flash 1s ease 3;
}

/* 动画 */
@-webkit-keyframes flash {
  50% { opacity: 0; }
}

@-moz-keyframes flash {
  50% { opacity: 0; }
}

@-ms-keyframes flash {
  50% { opacity: 0; }
}

@-o-keyframes flash {
  50% { opacity: 0; }
}

@keyframes flash {
  50% { opacity: 0; }
}

In diesem Code beginnt die Animation, nachdem die Seite 2 Sekunden lang geladen wurde.

Wie wiederholt man CSS3 -Animationen mit JavaScript?

Sie können CSS3-Animationen mit JavaScript mithilfe der Eigenschaft "Animation-Operation-Count" wiederholen. Diese Eigenschaft gibt an, wie oft die Animation gespielt werden soll. Sie können diese Eigenschaft in JavaScript wie folgt festlegen:

var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);

In diesem Code wird die Animation auf unbestimmte Zeit wiederholt.

Kann ich die Geschwindigkeit von CSS3 -Animationen mit JavaScript ändern?

Ja, Sie können die Geschwindigkeit von CSS3 -Animationen mit JavaScript ändern. Die Eigenschaft "Animationsdauer" steuert die Zeitdauer, die die Animation benötigt, um einen Zyklus abzuschließen. Sie können diese Eigenschaft in JavaScript wie folgt festlegen:

anim.addEventListener("animationiteration", AnimationListener, false);

In diesem Code dauert die Animation 2 Sekunden.

Wie kann CSS3 -Animationen mit JavaScript innehalten und wiederhergestellt werden?

Sie können CSS3-Animationen mithilfe der Eigenschaft "Animation-Play-State" pausieren und wiederherstellen. Diese Eigenschaft legt fest, ob die Animation ausgeführt oder innehalten wird. Sie können diese Eigenschaft in JavaScript wie folgt festlegen:

anim.addEventListener("animationend", AnimationListener, false);

In diesem Code wird die Animation durchgeführt.

Kann ich die Ausrichtung von CSS3 -Animationen mit JavaScript ändern?

Ja, Sie können die Ausrichtung Ihrer CSS3 -Animation mit JavaScript ändern. Die Eigenschaft "Animation-Regisseurung" definiert, ob die Animation während eines Wechselzyklus umgekehrt gespielt werden soll. Sie können diese Eigenschaft in JavaScript wie folgt festlegen:

var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
    for (var p = 0; p < pfx.length; p++) {
        if (!pfx[p]) type = type.toLowerCase();
        element.addEventListener(pfx[p] + type, callback, false);
    }
}

In diesem Code wird die Animation rückwärts abgespielt.

Wie kann ich JavaScript verwenden, um das Ende einer CSS3 -Animation zu erkennen?

Sie können JavaScript verwenden, um das Ende einer CSS3 -Animation zu erkennen, indem Sie dem Ereignisereignis einen Ereignishörer hinzufügen. Diese Veranstaltung wird nach Abschluss der CSS3 -Animation abgefeuert. Hier erfahren Sie, wie es geht:

// 动画侦听器事件
PrefixedEvent(anim, "AnimationStart", AnimationListener);
PrefixedEvent(anim, "AnimationIteration", AnimationListener);
PrefixedEvent(anim, "AnimationEnd", AnimationListener);

Kann ich die Animations-Timing-Funktion von CSS3-Animation mit JavaScript ändern?

Ja, Sie können die "Animations-Timing-Funktion" von CSS3-Animationen mit JavaScript ändern. Diese Eigenschaft gibt die Geschwindigkeitskurve der Animation an. Sie können diese Eigenschaft in JavaScript wie folgt festlegen:

if (e.animationName == "flash" &&
    e.type.toLowerCase().indexOf("animationend") >= 0) {
    ...
}

In diesem Code beginnt die Animation langsam und beschleunigt dann.

Das obige ist der detaillierte Inhalt vonSo erfassen Sie CSS3 -Animationsereignisse in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!