wikipedia üzerinde yeniden boyutlandırma animasyonu

Question

Chrome'da Wikipedia page'a giderseniz ve ctrl + scrollup veya ctrl + scrolldown ile yeniden boyutlandırma bir animasyonda yapılır.

Bu nasıl başarılır?

(FF sağ üst köşesinde canlandırılır sadece

Read 
    View source 
    View history 

bağlantılar)

Answer 1

Chrome'un Inspector ile CSS incelerseniz, bu kural bulacaksınız:

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

Bu, Webkit'in yakınlaştırma ve uzaklaştırma sırasında değiştirdiği margin-left ve padding özelliklerini sorunsuz bir şekilde canlandırır. Firefox da canlandırmalı ama yapmıyor.

Answer 2

Wikipedia, çoğu tarayıcıda animasyon yapmaz, ancak devam etmek için animasyon var. İlk ipucu, her sayfanın gövdesindeki vector-animate sınıfıydı. Kullanıcılar, load.js dosyası (her sayfanın alt kısmında), kullanıcılar yakınlaştırıp uzaklaştığında animasyonlu bir anahtar oluşturmaya çalışır, ancak bu çoğu tarayıcıda desteklenmez (yalnızca bir kaç tane). Çoğu FF ve IE sürümünde çalışmaz. yük JS dosyası burada bulunur: //bits.wikimedia.org/de.wikipedia.org/load.php?debug=false&lang=de&modules=site&only=scripts&skin=vector&*

Buna ek olarak, onlar da bu animasyon denemek için biraz CSS kullanın:

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

Bu Webkit tarayıcıları için aynı etkiyi tanınacak. Bu konuda bir referans here bulunur. Dikkat edeceğiniz gibi, bu transitions CSS3 özelliği henüz çok iyi desteklenmiyor.

Bu özelliğin desteği hakkında daha fazla bilgi için, here numaralı telefonu işaretleyin.