Teilen Sie ein Beispiel für die Überwachung des Endereignisses einer CSS3-Animation-CSS-Tutorial-php.cn

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

零下一度

Freigeben： 2017-05-18 14:29:27

Original

5233 Leute haben es durchsucht

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("动画结束");
})

Nach dem Login kopieren

-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("动画结束");
})

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!