Efekt 'rozjechania' divów

Question

Cześć, próbuję zrobić animację 'rozjechania' divów po kliknięciu.

Kod: http://codepen.io/hub33k/pen/objBaB

Czy macie pomysł jak to ugryźć?

Answer 1

By animowały się jakiekolwiek właściwości, prócz końcowej wartości musi być ustawiona wcześniej początkowa wartość.
Do tego właściwosć transistion powinna znajdować się w klasie "głównej", tzn. po prostu w .header, .main, .footer, a nie w .active.
W innym wypadku, animacja zostanie zastosowana tylko dla "wejścia", "wyjście" będzie po prostu zwyczajnym przeskoczeniem elementów.

http://codepen.io/anon/pen/vLNJxj
Taki efekt chciałeś uzyskać? :)

Rzeczy, które zmieniłem:
dla .header, .main, .footer:
+ position: absolute
+ z-index: 0;
+ width: 100%;
+ transition: all 0.5s linear;
+ poszczególne wartości top.

dla .active
- position: absolute;
- left: 0;
 - bottom: 0;
-  right: 0;
-  width: 100%;
-  transition: all 0.5s linear;
 

Comments

Wielkie dzięki! O to właśnie chodziło :)

Answer 2

transition:1.1s;

Może to będzie odpowiadało.