wikipediaでアニメーションのサイズを変更

Question

ChromeのWikipedia pageに行き、ctrl + scrollupまたはctrl + scrolldownを行った場合、サイズ変更はアニメーションで行われます。

これはどのように達成されましたか？

（右上のアニメーションではFFのみ

Read 
    View source 
    View history 

リンクで）

Answer 1

あなたが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もアニメーション化する必要がありますが、そうではありません。

Answer 2

ウィキペディアはほとんどのブラウザでアニメーション化されていませんが、アニメーションが続行されています。最初のヒントは、各ページの本文に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をチェックしてください。