Schalten Sie CSS3-Animation Mit jQuery?

Ich habe ein Objekt mit einer animation beim laden der Seite:

.logo-mark {
        -webkit-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000);
            -moz-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000);
            -ms-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000);
            animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000);
    }

Einer bestimmten Zeit, ich möchte JavaScript aktivieren auf eine bestimmte animation, die Auftritt, endlos, bis JavaScript Stoppt gesagt, animation. Also habe ich einfach eine weitere Klasse mit dem Namen .logo-laden, und zu bestimmten Zeiten, jQuery hat ein addClass und removeClass.

.logo-loading {
            -webkit-animation: spin 4s infinite linear;
                -moz-animation: spin 4s infinite linear;
                -ms-animation: spin 4s infinite linear;
                animation: spin 4s infinite linear;
        }

Jedoch, wenn der JavaScript-entfernt die Klasse, das Objekt einfach immer drehen, egal was. Ist es etwas, was ich hier tun kann?

Vergessen Sie nicht, um für die Zukunft gerüstet! IE10 und opera sind die Umsetzung von CSS-Animationen, so dass Sie können auch angeben,- ms-und-o-Präfixe, damit jeder in der Lage, um zu sehen, wie toll Ihre Website ist, wenn Sie Holen Sie sich die neuesten Versionen Ihrer Browser!

InformationsquelleAutor John Shammas | 2012-02-19

  1. 16

    Können Sie einfach überschreiben, CSS-Eigenschaften mit "none" zu jeder animation

    function stopAnimation(element)
{
    $(element).css("-webkit-animation", "none");
    $(element).css("-moz-animation", "none");
    $(element).css("-ms-animation", "none");
    $(element).css("animation", "none");
}

    damit Sie aufhören können die animation einfach aufrufen dieser Funktion...

    Sie brauchen nicht zu verwenden Präfixe, jQuery werde es für Euch 😉

    InformationsquelleAutor Sinisa Bobic

  2. 16

    Wenn Sie wollen, so halten Sie eine animation (und dann wieder an dem Punkt, dass es angehalten wurde), können Sie wechseln es ist play-Status mit dieser CSS-Eigenschaft:

    .paused {
   -ms-animation-play-state:paused;
   -o-animation-play-state:paused;
   -moz-animation-play-state:paused;
   -webkit-animation-play-state:paused;
  animation-play-state: paused;
}

    Anschließend können Sie mit jquery Umschalten der angehalten-Klasse:

    $("#animatedElement").click(function(e){ 
  $(e.currentTarget).toggleClass("paused"); 
});

    Diesem Beispiel sehen, dass tatsächlich Pausen ohne javascript:
    http://jsfiddle.net/fRzwS/

    Und dieser Beitrag auf forrst von der Geige Autor:
    http://forrst.com/posts/How_To_Pause_CSS_Animations-0p7

    InformationsquelleAutor Jim Jeffers

  3. 0

    Dieser funktioniert wie Sie erwarten würden, in Firefox finden Sie in diesem jsFiddle:

    Also modifizierte ich dein Beispiel (nur beibehalten -moz- wie es Firefox) 1s-Zyklen, fange ich die Spinnen und dann endet es nach 3,6 s. Alles funktioniert einwandfrei, Firefox 11.0 auf Xubuntu 11.10.

    Wenn Sie nicht mit Firefox, können Sie versuchen, Sie in Firefox, um zu bestätigen, dass Sie (Ihre und meine Beispiele) Arbeit gibt es auf Ihrer Maschine? Es könnte ein browser-spezifisches "feature".

    InformationsquelleAutor icyrock.com

Schreibe einen Kommentar