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;
}

/* 動(dòng)畫 */
@-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);
    }
}

#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;
}

/* 動(dòng)畫 */
@-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

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;
}

/* 動(dòng)畫 */
@-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:

// 動(dòng)畫偵聽器事件
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!