cambio de tamaño de animación en wikipedia

Question

Si va a Wikipedia page en Chrome y ctrl + scrollup o ctrl + scrolldown, el cambio de tamaño se realiza en una animación.

¿Cómo se consigue esto?

(en FF sólo los

Read 
    View source 
    View history 

enlaces en la esquina animado arriba a la derecha)

Answer 1

Si examina el CSS con el inspector de Chrome, se encuentra esta regla:

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; 
} 

Esto anima suavemente las propiedades margin-left y padding, que Webkit parece modificar al acercar y alejar. Firefox también debería animar, pero no es así.

Answer 2

La Wikipedia no se anima en la mayoría de los navegadores, pero hay animaciones que intentan continuar. La primera pista fue la clase vector-animate en el cuerpo de cada página. Su archivo load.js (llamado en la parte inferior de cada página) intenta crear un interruptor animado cuando los usuarios acercan y alejan, pero esto no es compatible con la mayoría de los navegadores (solo unos pocos afortunados). No funciona en la mayoría de las versiones de FF e IE. El archivo JS carga se encuentra aquí: //bits.wikimedia.org/de.wikipedia.org/load.php?debug=false&lang=de&modules=site&only=scripts&skin=vector&*

Además, también utilizan un poco de CSS para tratar de animar esta:

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; 
} 

Esto tendría el mismo efecto para los navegadores WebKit. Se encuentra una referencia acerca de esto en here. Como notará, esta propiedad transitions CSS3 aún no es muy compatible.

Para obtener más información sobre el soporte de esta propiedad, marque here.