Stoppen einer CSS-animation, sondern lässt seine aktuelle iteration beenden

Ich habe Folgendes HTML:

<div class="rotate"></div>​

Und die folgenden CSS:

@-webkit-keyframes rotate {
  to { 
    -webkit-transform: rotate(360deg);
  }
}
.rotate {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-animation-name:             rotate;
    -webkit-animation-duration:         5s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  linear;
}​

Möchte ich wissen, ob es eine Möglichkeit (mit JavaScript), um die Bewegungssimulation zu stoppen, aber lassen Sie es Ende der aktuellen iteration (vorzugsweise durch Veränderung eines oder ein paar CSS-Eigenschaften). Ich habe versucht Einstellung -webkit-animation-name um einen leeren Wert, sondern bewirkt, dass das element zu springen, zurück zu seiner ursprünglichen position in eine schrille Mode. Ich habe auch versucht die Einstellung -webkit-animation-iteration-count zu 1 aber, dass nicht die gleiche Sache.

  • Als alternative schlage ich vor, eine javascript-animation.
  • Berechnung der aktuellen iteration und die Einstellung der iteration-count auf den Wert, ist es möglich/nachvollziehbar?
  • Versuchen Sie, eine andere Klasse für das div, die Stile, die Sie in der Lage sein, Sie wollen, es zu beenden, und dann mit javascript, gelten, dass die Klasse der div-Recht, wenn die animation auf den Punkt, Sie wollen, es zu stoppen.
InformationsquelleAutor knpwrs | 2012-10-25
  1. 29

    Stoppen der animation nach dem Erhalt eines animationiteration Veranstaltung. So etwas wie dies (mit jQuery):

    CSS

    @-webkit-keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
  }
}
.rotate {
    width: 100px;
    height: 100px;
    background: red;
}
.rotate.anim {
    -webkit-animation-name:             rotate;
    -webkit-animation-duration:         5s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  linear;
}

    HTML

    <div class="rotate anim">TEST</div>
<input id="stop" type="submit" value="stop it" />

    JS (JQuery)

    $("#stop").click(function() {
    $(".rotate").one('animationiteration webkitAnimationIteration', function() {
        $(this).removeClass("anim");
    });
});

    Fiddle: http://jsfiddle.net/sSYYE/1/

    Hinweis, dass ich mit .one hier (nicht .on), so dass der handler nur einmal ausgeführt wird. So, die animation kann später wieder gestartet werden.

    • Ich machte eine version, die kann auch neu starten der animation auf Anfrage. Der event-handler für die animationiteration webkitAnimationIteration Veranstaltungen werden deaktiviert, nachdem es ausgelöst wird. jsfiddle.net/MNQcN/1
    • Tatsächlich, das ist, warum ich verwendet .one() in meinem original-code (das haben Sie geändert). .one() bindet ein one-time-event-handler. Mit one: jsfiddle.net/MNQcN/3
    • Oh, aus irgendeinem Grund dachte ich, dass war ein Fehler. Tut mir Leid, dass.
    • OMG ich Liebe Sie! 😀
    • genau das, was ich suchte vielen Dank
    InformationsquelleAutor nneonneo
  2. 1

    Meinst du, dass Sie möchten, dass die animation zu stoppen, wo es ist, wenn es endet, ohne zu springen zurück zu seiner ursprünglichen position?

    Dann wollen Sie:

    Animieren, etwas in Bewegung von einem Ort zum anderen und haben es dort zu bleiben:
    animation-fill-mode:forwards;

    überprüfen Sie diesen link:

    http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp

    InformationsquelleAutor user3374200
Schreibe einen Kommentar