zmiana rozmiaru animacji na wikipedia

Question

Jeśli przejdziesz do wersji Wikipedia page w Chrome i ctrl + scrollup lub ctrl + scrolldown, zmiana rozmiaru zostanie wykonana w animacji.

Jak to osiągnąć?

(w FF tylko

Read 
    View source 
    View history 

linki w prawym górnym rogu ożywionej)

Answer 1

Jeśli przyjrzysz CSS z Chrome Inspektora znajdziesz tę regułę:

body.vector-animateLayout div#content, body.vector-animateLayout div#footer { 
    transition: margin-left 250ms,padding 250ms; 
    -moz-transition: margin-left 250ms,padding 250ms; 
    -webkit-transition: margin-left 250ms,padding 250ms; 
    -o-transition: margin-left 250ms,padding 250ms; 
} 

To płynnie animuje właściwości margin-left i padding, które Webkit wydaje się modyfikować podczas powiększania i pomniejszania. Firefox powinien także animować, ale tak się nie dzieje.

Answer 2

Wikipedia nie jest animowana w większości przeglądarek, ale pojawia się animacja, która próbuje przejść dalej. Pierwszą wskazówką była klasa vector-animate na ciele każdej strony. Ich plik load.js (wywołany na dole każdej strony) próbuje utworzyć animowany przełącznik, gdy użytkownicy powiększają i pomniejszają rozmiar ekranu, ale nie jest to obsługiwane w większości przeglądarek (tylko nieliczne szczęśliwe). Nie działa w większości wersji FF i IE. Plik JS obciążenie znajduje się tutaj: //bits.wikimedia.org/de.wikipedia.org/load.php?debug=false&lang=de&modules=site&only=scripts&skin=vector&*

Ponadto, oni również korzystać z niektórych CSS, aby spróbować ożywić to:

body.vector-animateLayout div#content, body.vector-animateLayout div#footer { 
transition: margin-left 250ms,padding 250ms; 
-moz-transition: margin-left 250ms,padding 250ms; 
-webkit-transition: margin-left 250ms,padding 250ms; 
-o-transition: margin-left 250ms,padding 250ms; 
} 

byłoby to uzyskać ten sam efekt dla przeglądarek WebKit. Odniesienie na ten temat można znaleźć here. Jak zauważysz, ta właściwość CSS3 transitions nie jest jeszcze dobrze obsługiwana.

Aby uzyskać więcej informacji na temat obsługi tej nieruchomości, sprawdź here.