Animationsanteilsbasierte Position mit JQuery- und/oder CSS3-Übergängen (über Plugin)

Question

Ich versuche ein Seitenlayout zu erstellen, das Abschnitte enthält, die beim Navigieren ein- und ausrutschen. Jeder Abschnitt füllt den Bildschirm (100% Breite/Höhe) und ist absolut mit einem prozentualen Wert positioniert.

In der beigefügten Probe befinden sich vier Abschnitte, die wie folgt positioniert sind:

[a]
[b][c][d]

wobei [a] bei 0 0 liegt, [b] bei 0 100%, [c] bei 100%100%und [D] bei 200%100%.

Um die Navigation zu erreichen, habe ich jetzt alle Abschnitte 100% zu 100% absolut positioniert, überlaufverbundener Container. Wenn ein Abschnitt navigiert wird, sind die Werte "Top" und "links" des Containers zum Negativ des Versatzes des Abschnitts animiert, z. B. wenn [d] ausgewählt ist, wird der Container auf -200% -100% animiert.

Seltsames Verhalten gibt es im Überfluss! Beim Navigieren zu einem 0% Offset (links oder nach oben) funktionieren die Übergänge einwandfrei. Andere Kombinationen (dh negative Offsets) führen jedoch zu scheinbar unlogischen (aber konsistenten) Macken.

Überzeugen Sie sich selbst: http://www.doronassayas.com/ypsite

Hier ist eine Zusammenfassung:

• c] und [d] zu [a] oder [b] funktioniert einwandfrei.
• a] zu [b] und [a] to [d]: springt bis zum Ende, springt zum Anfang zurück und beginnt sich zu beleben.
• a] und [b] bis [c] ist der seltsamste - bevor der Übergang beginnt, das Ganze Karosserie (oder ein anderes hochstufiges Element?) Steckt zu einem visuellen Offset, der nicht über CSS (unsichtbar in Firebug- und anderen Entwicklungswerkzeugen). Anstatt bei [C] zu enden, landen wir (visuell) an [D], obwohl die CSS -Werte deutlich zeigen, dass wir uns bei [C] befinden sollen. Wenn Sie zufällige Dinge wie das Klicken in die Firebug -Hierarchie machen, setzt die Ansicht auf den richtigen Ort zurück. WTF?

Getestet dies in Firefox 4, Chrome 10 und Safari 5, und das gleiche Verhalten tritt in allen Browsern auf, ob Jquery.animate () oder Louis Remis sehr cooler jQuery.Transition Plugin, was einfach eine -prefix -Übergang auf den Container anwendet, zusammen mit den neuen Offset -Werten, wenn Animate () aufgerufen wird.

Die Konsistenz der Fremdheit fasziniert mich. Irgendwelche Ideen?

Jede Hilfe war sehr geschätzt.

Answer 1

Nach beträchtlichem Haarverpackung diagnostizierte ich schließlich das Buggy-Verhalten durch Einschalten des Überlaufs: automatisch auf dem Körperelement. Es stellt sich heraus, dass die Positionierung von Possen mit negativen Werten die kalkulierte Breite und die Körperhöhe ausführen, die sich während der Übergänge immer wieder ändert (und nie auf 100% des Fensters bleibt, was das erwartete Verhalten war). Das Ergebnis sind schwankende Bildlaufleisten und falsche Bildlauforte des Körperelements, wenn auch überraschend konsistent über die Browser.

Die Lösung stellte sich als sehr einfach heraus:

body
{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

Die feste Position, die ich noch nie zuvor verwendet habe, lässt das Körperelement die feste Größe und Position beibehalten und gleichzeitig Änderungen an seinem Inhalt ignoriert. Und da hast du es! Schöne Übergänge, hardwarebeschleunigt, wo dank JQuery und Louis Remi unterstützt werden.