Jak przesuwać elementy div z poza ekranem do układu absolutnego za pomocą przejść CSS?

Question

Mam siatkę bezwzględnie rozmieszczonych elementów div (siatka składa się z różnie ukształtowanych prostokątów, które pasują do siebie tworząc duży prostokąt).

Próbuję ożywić wyświetlanie tej siatki, ponieważ wszystkie pojedyncze prostokąty "latają" do siatki poza ekranem. Tak więc prostokąty po lewej leją od lewej, te po prawej od prawej itd.

Używam przejść CSS3 i podczas lotu z góry lub z lewej działa idealnie, po prostu używam ujemnych marginesów do ustaw je na ekranie, a następnie animuj, aby zmienić na lewy margines (lub margines-górny) = 0 (np. pozycja prawidłowa/prawidłowa).

To wydaje się być bardziej sensowne niż używanie transformacji, ale proszę poprawić mnie, jeśli uważasz, że istnieje powód, dla którego transformacje będą działały/działają lepiej z jakiegokolwiek powodu?

Jednak to oczywiście nie zadziała, jeśli chodzi o margines prawy/marżowy, więc chciałem sprawdzić, czy ktoś może zasugerować, jaki jest najlepszy sposób na osiągnięcie tego od prawej i od dołu? Mogę sprawić, że rodzic się przepełni: ukryje i ożywi lewe/górne pozycje, które będą miały ten sam efekt, ale chciałem sprawdzić, czy istnieje ogólne rozwiązanie równoważne ujemnym marginesom, aby uniknąć potrzeby oddzielnych reguł/pozycji dla każdego wyłączonego i na ekranie wersja? np. przy użyciu ujemnych marginesów mogę zastosować ten sam ujemny margines do wszystkich pól, które wlatują z tej samej strony bez żadnego określonego elementu (ale jeśli animuję górną/lewą stronę, każdy element będzie potrzebował swojej własnej pozycji "poza ekranem" do ostatecznej pozycji, więc leci z odpowiedniego miejsca).

Alternatywnie, jeśli istnieje lepszy sposób w ogóle (CSS3 jest w porządku!), To bardzo chciałbym to usłyszeć!

Answer 1

Nie animuj z marginesami, zawsze animuj z transformacjami, to jest ich przeznaczenie. Oto wielki artykuł na ten temat od Paul Irish

Dlaczego ruchome elementy z translate() jest lepsze http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

Zastosowanie overflow-x: ukryty ukryć div pochodzących z prawej strony.Oto skrzypce, które pokazałem, jak animować z transformacją bez określania wartości pikseli;

http://jsfiddle.net/P9GNS/3/

HTML

<div class="box-wrapper loading"><div class="box"></div></div> 
<div class="box-wrapper loading"><div class="box"></div></div> 
<div class="box-wrapper loading"><div class="box"></div></div> 
<div class="box-wrapper loading"><div class="box"></div></div> 
<div class="box-wrapper loading"><div class="box"></div></div> 
<div class="box-wrapper loading"><div class="box"></div></div> 

CSS

body { 
    overflow-x: hidden; 
} 


.box-wrapper { 
    -webkit-transition-duration: 600ms; 
    transition-duration: 600ms; 
} 


.box-wrapper.loading:nth-child(odd) { transform: translate(100%) } 
.box-wrapper.loading:nth-child(even) { transform: translate(-100%) } 


.box-wrapper:nth-child(odd) .box { background: orange } 
.box-wrapper:nth-child(even) .box { background: red } 


.box { 
    margin: auto; 
    width: 100px; 
    height: 100px; 
} 

JAVASCRIPT

$('.box-wrapper').each(function(index, element) { 

    setTimeout(function(){ 
     element.classList.remove('loading'); 
    }, index * 600); 

}); 

Answer 2

Zazwyczaj transform: translate... zapewnia lepszą wydajność w większości przeglądarek, ponieważ próbują renderować animację za pomocą GPU.

Możesz sprawdzić te wyniki z jsperf.

W każdym razie innym dobrym rozwiązaniem (bez javascript) byłoby dołączenie animacji całkowicie w CSS z właściwością @keyframes i animation:.

Więcej informacji na ten temat można znaleźć pod numerem this article.

Z wytycznych można przeczytać

Zastosowanie CSS animacji klatka kluczowa lub CSS przejścia, jeśli w ogóle możliwe. Przeglądarka może zoptymalizować malowanie i komponowanie w tym czasie.