Wie man Folie in divs aus dem off-screen in absolute-layout mit CSS-übergängen?
Habe ich ein raster von absolut positionierten divs (das Gitter ist aus unterschiedlich geformten Rechtecken, die zusammen passen, um ein großes Rechteck).
Ich versuche zu animieren, die Anzeige des Rasters, indem er die einzelnen Rechtecke 'fly' in das Netz von offscreen. Also die Rechtecke auf der linken Seite Fliegen von Links, diejenigen auf der rechten Seite von der rechten etc.
Ich bin mit CSS3 transitions und beim Fliegen über den oberen oder linken Seite funktioniert es tadellos, ich habe gerade mit negativen Margen, um Sie außerhalb des Bildschirms, und dann animieren diese zu ändern, margin-left (Rand-oben) = 0 (z.B. die ursprünglichen/richtigen position).
Scheint dies mehr Sinn machen als die Verwendung von Transformationen, aber bitte korrigieren Sie mich, wenn Sie denken, dass es einen Grund gibt, verwandelt arbeiten/besser aus irgendeinem Grund?
Allerdings ist diese offensichtlich nicht für die Arbeit margin-right/margin-top und so wollte ich sehen, ob jemand vorschlagen kann, was der beste Weg dies zu erreichen ist von den rechten und unteren? Ich kann die Eltern overflow:hidden und animieren Sie die left/top-Positionen, die den gleichen Effekt haben aber ich wollte sehen, ob es gibt eine generische Lösung, die äquivalent zu negativen Margen, um so zu verhindern, braucht eigene Regeln/Positionen für die einzelnen off-und on-screen-version? zB bei Verwendung von negativen Rändern kann ich die gleichen negativen margin auf alle Boxen, die in Fliegen aus der gleichen Seite, ohne jede element-spezifischen mark-up (aber wenn ich animieren Sie die "oben/Links dann jedes element müssen es die eigenen "offscreen" - Stellung relativ zu seiner endgültigen position, so dass Sie fliegt von der richtigen Stelle).
Alternativ, wenn es einen besseren Weg gibt im Allgemeinen (CSS3 ist in Ordnung!) dann würde ich es gerne hören!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Nicht animieren, mit Margen, immer Animation mit Transformationen, dass ist Ihr Verwendungszweck. Hier ist ein großer Artikel über das von Paul Irish
Warum Elemente verschieben mit translate() ist besser
http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
Verwenden overflow-x: hidden ausblenden der divs kommen von der rechten Seite. Hier ist ein Turnschuh, das ich gemacht, um zu zeigen, wie Sie animiert mit zu transformieren, ohne die Angabe von pixel-Werten;
http://jsfiddle.net/P9GNS/3/
HTML
CSS
JAVASCRIPT
In der Regel
transform: translate...
gibt Ihnen eine bessere Leistung auf den meisten Browsern, weil Sie versuchen, zu Rendern Sie die animation mithilfe der GPU.Können Sie überprüfen die Ergebnisse von jsperf.
Sowieso eine andere gute Lösung ( ohne javascript ) wäre zu befestigen, wird die animation komplett in CSS mit
@keyframes
undanimation:
Eigenschaft.Mehr Informationen zu diesem Thema ist in dieser Artikel.
Aus den Richtlinien, die man Lesen kann