CSS3 und jQuery

Um die Transition Funktion von CSS3 optimal nutzen zu können, solltet ihr dies mit einer JQuery Klassen Umschaltung kombinieren. Dies ist eigentlich ganz einfach, ihr Stylt euer Element, wie es am Anfang der Animation aussehen soll. Nun erstellt Ihr noch eine Zusätzlichen Style wie es am ende der Animation aussehen soll. Diesen Style fügt Ihr dann mit einem Jquery event, z.b. einem Click oder Mouseover, hinzu.

Im Beispiel unten wird nach dem Click über JQuery eine Klasse .start-animation hinzugfügt. Die Box passt sich nun den neuen Styles mittels einer Animation an. Das Ganze hat den Vorteil, dass es flüssiger läuft als eine Jquery Animation, zudem verbraucht diese Art von Animationen am wenigsten Systemressourcen. Besonders gut ist dies bei Mobilen Geräten zu sehen, eine Animation mit CSS läuft wesentlich besser als eine mit JQuery.

Der HTML Code

<div class="block-sample-transtion">
    <div class="element"></div>
</div>

Der CSS Code

.block-sample-transtion{
    width: 100%;
    height: 150px;
}

.element{
    transition: all 2s ease;
    transform: rotate(0deg)
    cursor: pointer;
    width: 50px;
    height: 50px;
    background-color: #ccc;
    position: relative;
    left: 0px;
}

.start-animation{
    background-color: #EB0FE2;
    left: 200px;
    width: 100px;
    height: 100px;
    transform: rotate(90deg);
}

Und der der jQuery Code

$(document).on("click",".element", function(){
    $(this).toggleClass("start-animation");
});