CSS3 - Animation-margin-left-Eigenschaft über JavaScript

Angesichts dieser proof-of-concept, wäre es möglich zu animieren, margin-left (sowohl negative als auch positive Werte) mit Hilfe von JavaScript?.. Und wie würden Sie über das tun so gehen?

Hinweis: ich weiß, das ist WebKit nur. Und ich bin gut, zu sehen, wie ich bin Entwicklung für iOS-Safari.

Update

Danke für die Antworten, aber die jQuery-animate-Funktion nicht unterstützt, ist Reine CSS-Animationen, die ist, was ich brauche.

ich habe ein kleines plugin für dieses eine mal, es verwendet Reine CSS3 animation, wenn möglich, wenn nicht es verwendet die jQuery native animate-Funktion: jsfiddle.net/WsR5s/12 (unterstützt :animierte selector und .stop())

InformationsquelleAutor cllpse | 2011-06-22

25

Ich weiß, dass Sie ausdrücklich sagen: "können Sie dies tun in JavaScript", aber Sie sollte nicht müssen JavaScript verwendet. Ich bin mir ziemlich sicher, dass der proof-of-concept Sie link nur jQuery verwendet, als eine Möglichkeit, um die Animationen mit fallback auf JavaScript, so dass alle Browser spielen schön mit der animation. Da Sie speziell für die Entwicklung für Mobile Safari, die Sie nicht benötigen, sollten auf die Verwendung von jQuery für diese Ausnahme zu verwenden, eine Geschichte-plugin, um push-und pop-Staaten, um die browser-Schaltfläche "zurück" funktionieren; das ist durchaus machbar via CSS transition-Eigenschaften und die :target pseudo-Selektor.

So als alternative, sollten Sie in der Lage sein, so etwas zu tun:

In HTML:
```
<div id="thing-that-will-transition">
    <a href="#thing-that-will-transition>click this to transition the div</a>
</div>
```
CSS:
```
#thing-that-will-transition
{
    (bunch of properties)
    -webkit-transition: margin-left [the rest of your transition values]
}

#thing-that-will-transition:target
{
    margin-left: [your properties]
}
```
So lange, wie Sie Ihre fragment-URL übereinstimmungen mit dem Namen des Elements aus, das Sie wechseln möchten dann sind Sie sollte in der Lage sein, um die push-fragment in der URL mit JavaScript, wenn Sie unbedingt haben, anstelle der Verwendung von Anker mit einem fragment href während immer noch mit dem übergang stattfinden. Und wenn Sie ein jQuery-history-plugin, oder tun Sie Ihre eigenen drängen und Tauchen in der history stack dann erhalten Sie noch zurück-button Verhalten für Ihre app.

Kenne ich Sie ausdrücklich gebeten, für eine JavaScript-Lösung zum auslösen der CSS-animation, aber ich bin mir gerade nicht sicher, warum dies ist, was Sie brauchen. Sorry, wenn das nicht hilft Ihnen überhaupt.

UPDATE: Hier ein jsFiddle Nachweis der oben. Es nutzt diese jQuery-history-plugin zum verwalten der history stack, so dass Sie können immer noch akzeptabel vorwärts/zurück-button Verhalten von URL-fragment ist. Die Anker-tag verwendet das plugin "push -" oder "load" - Methode in die onClick-mit einem standard-fragment in das href-Attribut als fallback für Browser ohne JS aktiviert ist.

UPDATE 2: Hier ist noch ein jsFiddle verwendet-Transformationen/übersetzungen anstelle der übergänge.

UPDATE 3 (von roosteronacid):

Und für immer die Animationen gehen durch JavaScript können Sie tun:
```
var element = document.getElementById("...");

setTimeout(function ()
{
    element.style.webkitTransitionDuration = "0.3s";
    element.style.webkitTransitionTimingFunction = "ease-out";
    element.style.webkitTransform = "translate3d(300px, 0, 0)";
}, 0);
```
Hört sich nett an. Können Sie näher auf Ihr code. Ich würde gerne sehen, ein funktionierendes Beispiel.
Hier ist ein Turnschuh. Ich benutze den jQuery history-plugin im onClick des Ankers mit einem normalen fragment href fallen wieder auf, wenn der Benutzer JS deaktiviert hat. Beachten Sie, dass als ein Ergebnis, mit dem "zurück" - Taste bewirkt den übergang erneut ausgelöst. Sieht ziemlich glatt und viel einfacher als mit jQuery.
Ich war gerade dabei zu akzeptieren, Ihre Antwort, aber ich habe vor kurzem herausgefunden, dass nur EINIGE der CSS3-Spezifikation ist hardware-beschleunigt. Zu sehen, wie mein ursprüngliches Ziel war, zu vermeiden "laggy" - Animationen über JavaScript-frameworks, könnte Sie aktualisieren Sie Ihren code nutzen translate3d()?
href="http://jsfiddle.net/ft3aH/4/" >ta-da! Beachten Sie, dass ich verwendet translateX, denn dies ist, was die Marge transformation verwendet wurde. Wenn Sie wirklich, wirklich wollte translate3d() aus welchem Grund auch immer, dann ersetzen Sie die beiden -webkit-transform defs mit webkit-transform: translate3d(yourValue, 0, 0)
Akzeptiert Ihre Antwort und die zusätzlichen Infos über den Zugriff und die Einstellung der genannten Eigenschaften mithilfe von JavaScript. Danke für die Mühe, Kumpel.

InformationsquelleAutor Doug Stephen
9

Können Sie eine transition in css3, und dann nachträgliche änderungen auf das element animiert werden.
```
.MY_CLASS {
    -moz-transition: all 0.3s ease-out;  /* FF4+ */
    -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 0.3s ease-out;  /* IE10 */
    transition: all 0.3s ease-out;  
}
```
Gibt dies eine fast cross-browser (IE verdammt) übergang, gilt für alle css-änderungen, dauert 0,3 Sekunden und erleichtert, so wird es langsam nach unten in Richtung zum Ende des übergangs. Deshalb animieren Sie es nach Links/rechts ändern Sie einfach die css:
```
$(".MY_CLASS").css("margin-left", "-300px");
```
Hinweis: dies wird animieren, dass er eine Feste position von 300px, wenn Sie animieren wollen, auf eine position relativ zur aktuellen Position verwenden:
```
var mleft = $(".MY_CLASS").css("margin-left");
var newleft = mleft.substr(0, mleft.length-2) + 50;
$('.MY_CLASS').css("margin-left", newleft+"px");
```
Siehe ein Beispiel hier (jsFiddle)

InformationsquelleAutor Jordan Wallwork
5

Besser zu nutzen, übergänge, die fast cross-browser unterstützt (außer dem IE), und stellen Sie die keyframes durch JS.

InformationsquelleAutor Lea Verou
1

Dies funktioniert mithilfe von CSS -, HTML-und WebKit-nur:
```
#wrapper {
     width: 700px;
     text-align: left;
     border-radius:10px;
     -moz-border-radius:10px;
     border-style:solid;
     border-width:1px;
     border-color:#ccc;
     padding:30px 30px;
     -moz-box-shadow: 0px 0px 5px #BBB;
     -webkit-box-shadow: 0px 0px 5px #BBB;
     box-shadow: 0px 0px 5px #BBB;

     -webkit-transition-property: -webkit-transform, margin-left;
     -webkit-transition-duration: 3s;
     -webkit-transition-timing-function: ease-in;
     -webkit-transform: translate(100px);
}
```
Nur eine <div id="wrapper">Placeholder text</div> in eine HTML-Datei um es zu testen. Hat bei mir in Google Chrome 12.0.742.112 Safari 5.0.5 (6533.21.1). Wenn Sie es nicht tun, die animation sofort, es kann auf Ihre browser-Verarbeitung der übersetzung zu schnell (oder Zwischenspeichern, vielleicht?). Sie überlegen, das hinzufügen einer Verzögerung irgendwie. Ich drückte auf den refresh button ein paar mal wirklich schnell. Arbeitete für mich.

Edit:
Prüfen die Quelle hinter girliemac ist test Seite. Einige aufschlussreiche Sachen dort. Siehe auch diesen SO ein post.

InformationsquelleAutor Jacob Barnard
0

können Sie jqueries .animate() - http://api.jquery.com/animate/

Überprüfen Sie meine Beispiel - http://jsfiddle.net/ajthomascouk/jS83H/ - Drücken Sie die + und -

InformationsquelleAutor Alex
0

Animieren css Ränder mit jQuery funktioniert wie folgt:
```
$( '#mydiv' ).animate({

  'margin-left': 'new margin value'

});
```
InformationsquelleAutor Jose Faeti
0

Verwenden webkit-css-Animationen, Sie würde erstellen Sie eine Klasse, die der transform-Eigenschaft, dann kannst du jQuery verwenden, um hinzuzufügen/entfernen Sie sagte der Klasse, wie gebraucht.

InformationsquelleAutor DA.

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.