在維基百科上調整大小動畫

如果您在Chrome中按一下Wikipedia page，並按下ctrl + scrollup或ctrl + scrolldown，則調整大小將在動畫中完成。在維基百科上調整大小動畫

這是如何實現的？

（在FF僅在右上角動畫

Read 
    View source 
    View history

鏈接）

來源

2012-08-07 qwertymk

「Mouseup」意思是「向上滾動？」 – 2012-08-07 21:25:39

@MattBall是的，修正了 – qwertymk 2012-08-07 21:26:03

這聽起來像只是你的操作系統或瀏覽器放大和縮小你。 – 2012-08-07 21:27:11

如果您檢查與Chrome的督察的CSS，你會發現這條規則：

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

這可以平滑地激活margin-left和padding屬性，Webkit似乎在放大和縮小時會修改這些屬性。 Firefox也應該有動畫，但它不會。

來源

2012-08-07 21:28:25 Blender

維基百科在大多數瀏覽器中沒有動畫，但有動畫嘗試繼續。第一個線索是每個頁面正文上的vector-animate類。他們的load.js文件（在每個頁面的底部調用）試圖在用戶放大和縮小時創建一個動畫切換，但大多數瀏覽器都不支持這種切換（只有少數幸運兒）。它在大多數FF和IE版本中不起作用。負載JS文件這裏找到：//bits.wikimedia.org/de.wikipedia.org/load.php?debug=false&lang=de&modules=site&only=scripts&skin=vector&*

此外，他們還利用一些CSS來嘗試這個動畫：

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

這將得到WebKit瀏覽器相同的效果。有關這方面的參考找到here。你會注意到，這個transitions CSS3屬性還沒有得到很好的支持。

有關支持這個屬性的更多信息，請檢查here。

來源

2012-08-07 21:35:40

在維基百科上調整大小動畫

回答

相關問題