Wie replay css3 Animation umwandeln nach einigen Iterationen von jQuery

Ich habe diese Animation auf meinem Bild:Wie replay css3 Animation umwandeln nach einigen Iterationen von jQuery

<div class="image_for_sping"> 
    <img src="/anyimage.png"> 
</div>

Wo das Bild Stil-Attribut von jQuery hinzugefügt:

animation: spin360 0.1s linear 0s 20 forwards paused, spin360 0.25s linear 2s 8 forwards, spin360 0.5s linear 4s 4 forwards, spin360 1s linear 6s 2 forwards, spin90 2s linear 8s 1 forwards

Css für diese Animationen :

@-moz-keyframes spin360 { 100% { -moz-transform: rotate(-360deg); } } 
@-webkit-keyframes spin360 { 100% { -webkit-transform: rotate(-360deg); } } 
@keyframes spin360 { 100% { transform:rotate(-360deg); } } 
@-moz-keyframes spin90 { 100% { -moz-transform: rotate(-90deg); } } 
@-webkit-keyframes spin90 { 100% { -webkit-transform: rotate(-90deg); } } 
@keyframes spin90 { 100% { -webkit-transform: rotate(-90deg); transform:rotate(-90deg); } }

Wie ich von jQuery ohne Seite Nachladen wieder diese Animation abspielen kann?

Versuchen Beispiel: https://jsfiddle.net/rzqc2bsh/1/

Quelle

2017-06-24 Максим Артёмов

ein Toggle der Klasse normalerweise auf dem Element ein/aus. Bitte geben Sie ein funktionierendes Code-Snippet ein, damit wir das ganze Bild sehen können – LGSon

https://jsfiddle.net/rzqc2bsh/1/ –

eine Animation abspielen Sie müssen es ein-/ausschalten, wenn Sie also, wie dies zu tun, wo man es immer entfernen, bevor es das Hinzufügen und dann ein setTimeout verwenden, um ein zu zwingen neu zeichnen, sonst wird es nicht funktionieren.

$(document).ready(function() { 
 
    $("#btn").click(function(e) { 
 
    $('.box').css('animation', ''); 
 
    setTimeout(function() { 
 
     $('.box').css('animation', 'spin360 0.1s linear 0s 20 forwards paused, spin360 0.25s linear 2s 8 forwards, spin360 0.5s linear 4s 4 forwards, spin360 1s linear 6s 2 forwards, spin90 2s linear 8s 1 forwards'); 
 
    }, 5) 
 
    }); 
 
});

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
} 
 

 
@-moz-keyframes spin360 { 100% { -moz-transform: rotate(-360deg); } } 
 
@-webkit-keyframes spin360 { 100% { -webkit-transform: rotate(-360deg); } } 
 
@keyframes spin360   { 100% { transform: rotate(-360deg); } } 
 
@-moz-keyframes spin90  { 100% { -moz-transform: rotate(-90deg); } } 
 
@-webkit-keyframes spin90 { 100% { -webkit-transform: rotate(-90deg); } } 
 
@keyframes spin90   { 100% { transform: rotate(-90deg); } }

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

 
<body> 
 
    <div class="box"></div> 
 
    <input type="submit" id="btn" value="spin" /> 
 
</body>

Quelle

2017-06-24 13:04:06 LGSon

es hat mit Timeout funktioniert, danke! –

Wie replay css3 Animation umwandeln nach einigen Iterationen von jQuery

Antwort

Verwandte Themen