Wie nimmst und entfernst du CSS-Klasse n mit setTimeout?

Question

Ich möchte hinzufügen und entfernen Sie eine CSS-Klasse n mal eine Animation zu zeigen, um einen Effekt n mal anzuzeigen, wie wenn Sie animation-iteration-count setzen, ist der Unterschied, dass hier habe ich zwei Animationen, die zweite mit Verzögerung.

Meine Idee war, setTimeout zu verwenden, also lese ich this Stack Overflow post, aber ich habe nicht die erwarteten Ergebnisse erhalten. Hier

ist ein Ausschnitt - und ein JSfiddle - mit der Animation (zeigt einmal)

$('button').click(function(){ 
 
    $('div').addClass('a'); 
 
    
 
    $(this).attr('disabled','true').text('Started'); 
 
    
 
    setTimeout(function(){ 
 
    $('div').removeClass('a'); 
 
    
 
    $('button').removeAttr('disabled').text('Finished | Again'); 
 
    },6000); 
 
});

div { 
 
    width: 100px; height: 100px; background: red; 
 
} 
 

 
.a { 
 
    animation: a 2s linear, b 2s 2s linear; 
 
} 
 

 
@keyframes a { 
 
    from { background: red; } 
 
    to { background: blue; } 
 
} 
 

 
@keyframes b { 
 
    from { background: blue; } 
 
    to { background: black; } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div></div> 
 
<button>Start</button>

Answer 1

Sie setInterval verwenden können und die Anzahl der Iterationen zählen.

var n = 3; 
var iterationCount = 0; 

$('button').click(function(){ 
clearInterval(animInterval); 

var animInterval = setInterval(function(){ 
    $('div').toggleClass('a'); 
    iterationCount++; 

    if (n == iterationCount) 
     clearInterval(animInterval); 
    },4000); 
}); 

https://jsfiddle.net/brhL9h54/10/

Answer 2

die CSS Weg

eine Animation mit js Wiederholung scheint mir falsch. Es gibt die Eigenschaft animation-iteration-count, und mit der Möglichkeit, mehrere @keyframes hinzuzufügen, sollten Sie in der Lage sein zu erreichen, was Sie wollen. Für Ihre Beispielcode ist es ganz einfach selbst (obwohl ich Ihre echte Animation vermuten, dass andere ein wenig sein kann:

.a { 
    animation: a 2s linear 5 alternate; 
} 

@keyframes a { 
    0% { background: red; } 
    50% { background: blue; } 
    100% { background: black; } 
} 

Fühlen Sie sich frei, Ihre eigentliche Animation zu schreiben, wenn Sie nicht, einen Weg zu erreichen, ist es mit nur CSS finden . https://jsfiddle.net/brhL9h54/4/

die js Weg

Wenn Sie auf dem gehen die js Weg beharren, werden Sie das Timeout machen müssen sicherstellen, dass nach jedem Zyklus zurückgesetzt wird. Dies kann durch den Aufruf einer Funktion rekursiv durchgeführt werden Und mit Hilfe eines Zählers können Sie e Kontrollieren Sie, wie oft Sie möchten, dass es läuft. Etwas in dieser Reihenfolge:

$('button').click(function(){ 
    $('div').addClass('a'); 

    $(this).attr('disabled','true').text('Started'); 

    var counter = 5; 

    function repeater() { 
    if (counter >= 0) { 
     $('div').toggleClass('a'); 
     counter--; 
     // start new cycle 
     setTimeout(repeater, 3000); 
    } else { 
     // cleanup 
     $('button').removeAttr('disabled').text('Finished | Again'); 
    } 
    } 

    // boot the repeater 
    repeater() 
}); 

https://jsfiddle.net/brhL9h54/7/

Answer 3

Sie können animationend Ereignis behandeln. Schauen Sie sich diesen Code:

$('div').on('animationend', function (data) { 
if (data.originalEvent.animationName === 'b') { 
    $('div').removeClass('a'); 
    iteration++; 
    if (iteration < n) { 
    setTimeout(function() { $('div').addClass('a'); }); 
    } else { 
    iteration = 0; 
    $('button').removeAttr('disabled').text('Finished | Again'); 
    } 
} 
}); 

Es Parameter data.originalEvent.animationName ist die Animation Name schon sagt, die beendet wird. Ihre letzte Animation ist b. Dann müssen Sie die Klasse entfernen und erneut hinzufügen. Sie müssen auch die aktuelle Iterationsnummer und die maximale Anzahl der Interaktionen beibehalten. Prüfen Sie dies hier: https://jsfiddle.net/svnwmg3g/

Answer 4

Hier ein Update für Ihre Geige ist:

https://jsfiddle.net/jb03ba1f/2/

Wie Sie sehen können, wird dies die Animation jedoch oft Sie wollen wiederholen, und können auch mehrere Animationen aufnehmen, aber es ist ein bisschen unordentlich. Da Sie bereits mit jQuery arbeiten, würde ich vorschlagen, in jQuerys animierte API zu schauen, die (glaube ich) robustere Callbacks hat, aber ich benutze jQuery kaum, also müssen Sie sich das ansehen.

Wenn dies nicht deckt, was Sie suchen, können Sie vielleicht ein Beispiel online finden, um Ihre Frage besser zu veranschaulichen.

(js/jquery Referenz - obwohl ich die Keyframes aktualisiert wurde auch auf der Geige sehen eine andere Animation hinzufügen, so)

$('button').click(function(){ 
    $('div').addClass('a'); 

    $(this).attr('disabled','true').text('Started'); 

    var n = 0; 

    var interval = setInterval(function() { 
    $('div').removeClass('a'); 

    if (n === 5) { 
     clearInterval(interval); 
     $('button').removeAttr('disabled').text('Finished | Again'); 
    } else { 
     setTimeout(function() { 
     $('div').addClass('a'); 
     }, 0) 
     n++; 
    } 
    }, 4500); 
});