CSS animation : verschieben eines div mit der neuen position relativ zu der vorherigen

für eine bessere Leistung, die ich ersetzen will:

$('#foo').animate({ left: '+=42px' }, 500);

durch einen übergang (oder eine animation) CSS3.
Aber wie können wir tun, um zu implementieren "+=" auf der linken Seite-Eigenschaft in CSS?

Bewegen, wie ein div-Element mit der neuen linken position relativ zu der vorherigen?

thx.

  • Tatsächlich, ich glaube, dass CSS und jQuery Animationen sind genau das gleiche im backend =)
  • Was würde verursachen, dass der übergang/animation? Was soll passieren, nachdem Sie beendet ist?
  • was Sie fordern ist nicht möglich, weil CSS ist keine Programmiersprache, es ist eine styling-markup. soweit ich weiß, += existiert nicht in css. außerdem ist, wie paulie oben schrieb, werden Sie wahrscheinlich erforderlich, um trigger die animation mit javascript sowieso, also bleiben Sie besser bei .animate.
  • Ja, ich bin über das denken. Ich würde eine css-Klasse wie .animation {transition: left += 10px} und nach der Anwendung-Klasse-DOM-element, aber ich werde mit JS. So, nun ist die Frage: "Klasse hinzufügen ist schneller thant ändern Links-Stil-Eigenschaft?"^^
  • sorry für die späte Antwort, das nächste mal, fügen Sie bitte eine @whatever wenn Sie jemand Antworten, so dass wir eine Nachricht bekommen :). über die Leistung, die Sie möchten, um einen Blick Hier
  • Ich habe eine Menge tests, ich denke, ändern Links Eigenschaft (ohne jquery) besser ist, thx.
  • gut, seine bis zu Ihnen, wirklich. wenn Ihre Zielgruppe system ist schnell genug, es wird nicht einen Unterschied machen, welche Methode Sie verwenden.

InformationsquelleAutor Matrix | 2014-09-25
  1. 8

    In vanilla-js, die Sie nicht verwenden können += ist, aber Sie können den alten Wert statt:

    JS:

    document.getElementById('foo').onclick = function() {
  this.style.left = parseFloat(getComputedStyle(this).left) + 42 + 'px';
};

    CSS:

    #foo {
  position: relative;
  left: 0;
  transition: 2s left;
}

    HTML:

    <div id="foo">Click me multiple times</div>

    InformationsquelleAutor Oriol
  2. 0

    Können Sie den übergang für glatte animation. Sie stellen nur den übergang in die Einstellungen in der CSS einem element wie diesem, 

    #foo {
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out
}

    Dann tun Sie Ihre Schrittweite von Links mit einem Skript wie diesem.

    $('#foo').css('left', '+=42px');

    Finden Sie in auf dieser Seite.

    • mein Ziel ist es nicht, verwenden Sie JS (und jQuery mehr) für Animationen. Ich benutze animieren, weil ich mit Verspätung, sry das ich nicht schreiben, Verzögerung n mein Beispiel, das ist mein Fehler, ich Editiere 😉
    InformationsquelleAutor hitesh upadhyay
Schreibe einen Kommentar