Aktivieren Webkit CSS3 Animation mit Javascript

Question

Ich suche Webkit CSS3 zu bewegen, um eine absolut positionierte DIV von einem Ort zum anderen auf dem Bildschirm zu verwenden, wenn eine Taste gedrückt wird, durch seinen linken und rechten CSS-Eigenschaften zu verändern. Jedoch sind alle Beispiele dafür tun, dass ich sah eine statische CSS-Regel verwenden, um diesen Übergang anwenden.

Ich weiß nicht, um die neue Position vor der Hand, so, wie ich diesen CSS3 Übergang dynamisch anwenden kann?

Answer 1

Wenn Sie den Übergang definiert haben, wird es egal anwenden, wie Sie die CSS-Werte auf das Element ändern. So können Sie einfach einen Inline-Stil mit JavaScript anwenden und das Element animieren. So mit CSS wie folgt aus:

left: 100px;
top: 100px;
-webkit-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;
-moz-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;
-o-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;
transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;

Haben Sie eine Funktion wie folgt aus:

function clickme() {
    var el = document.getElementById('mydiv');
    var left =  300;
    var top =  200;
    el.setAttribute("style","left: " + left + "px; top: " + top + "px;");
}

Und Sie werden um die Animation sehen, wenn Sie die Funktion aufrufen. Sie können die Werte für links und oben kommen, von wo immer wie Sie. Ich habe ein vollständiges Beispiel getan.

Answer 2

Eine andere Möglichkeit wäre die Verwendung jQuery Transit die absolut positionierte div nach links oder rechts zu bewegen:

Javascript:

$("#btnMoveRight").click( function () {
    $('#element').transition({ left: '+=50px' });
});

$("#btnMoveLeft").click( function () {
    $('#element').transition({ left: '-=50px' });
});

JS Fiddle Demo

Es funktioniert gut auf mobilen Geräten und kümmert sich um Ihre CSS3 / Browser Kompatibilitäten für Sie.