suchen

Heim  >  Artikel  >  Web-Frontend  >  Teilen Sie ein Beispiel für die Überwachung des Endereignisses einer CSS3-Animation

Teilen Sie ein Beispiel für die Überwachung des Endereignisses einer CSS3-Animation

零下一度
零下一度Original
2017-05-18 14:29:275206Durchsuche

Wenn die CSS3-Animation eine Animation abschließt, möchten wir die Animation im beendeten Zustand oder in einem anderen Ereignis halten. Was sollen wir tun?

Wir können uns das webkitAnimationEnd-Ereignis anhören 

// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {
    console.log("动画结束");
})

-webkit-animation Animation hat drei Ereignisse:

Startereignis: webkitAnimationStart
Endereignis: webkitAnimationEnd
Bewegungsereignis wiederholen: webkitAnimationIteration

// 动画开始时事件o.addEventListener("webkitAnimationStart", function() {
    console.log("动画开始");
})// 动画重复运动时事件o.addEventListener("webkitAnimationIteration", function() {
    console.log("动画重复运动");
})// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {
    console.log("动画结束");
})

Beispiel: 

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>webkitAnimationEnd</title><style type="text/css">#p1{
    margin: 200px auto 0;
    width: 200px;
    height: 200px;
    color: #fff;
    background-color: #000;
    -webkit-animation: transform 3s 2 ease;}@-webkit-keyframes transform {
    0%{
        -webkit-transform: scale(1) rotate(50deg);
    }
    30%{
        -webkit-transform: scale(2) rotate(100deg);
    }
    6%{
        -webkit-transform: scale(0.5) rotate(-100deg);
    }
    100%{
        -webkit-transform: scale(1) rotate(0);

    }}</style></head><body><p id="p1"></p><script type="text/javascript">var o = document.getElementById("p1");// 动画开始时事件o.addEventListener("webkitAnimationStart", function() {
    alert("动画开始");
})// 动画重复运动时事件o.addEventListener("webkitAnimationIteration", function() {
    alert("动画重复运动");
})// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {    this.className = "";
    alert("动画结束");
})</script></body></html>

CSS3-Übergangsattributübergang, am Ende von Animation Es gibt auch ein Endereignis: webkitTransitionEnd

Hinweis: Es gibt nur ein Ereignis für den Übergang

[Verwandte Empfehlungen]

1 > Detaillierte Einführung in das Animationsrichtungsattribut in CSS3

8 Hauptattribute der CSS3-Animation (Animation), die beherrscht werden müssen

3 🎜>Animation verwenden Beispiel-Tutorial zur verzögerten Ausführung zwischen Schleifen mithilfe von Attributen

4. Detaillierte Erläuterung der beiden Pausenmethoden (Übergang, Animation) in CSS3

Das obige ist der detaillierte Inhalt vonTeilen Sie ein Beispiel für die Überwachung des Endereignisses einer CSS3-Animation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Einführung in das Attribut „animation-direction“ in CSS3Nächster Artikel：Detaillierte Einführung in das Attribut „animation-direction“ in CSS3

In Verbindung stehende Artikel

Mehr sehen