5

Chromeでウィキペディアのページに移動してctrl+scrollupまたはctrl+scrolldownを実行すると、サイズ変更はアニメーションで行われます。

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

（FFでは

  Read
  View source
  View history

右上隅のリンクはアニメートします）

4

2 に答える 2

6

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

これにより、ズームインおよびズームアウト時にWebkitが変更するように見えるプロパティmargin-leftとプロパティがスムーズにアニメーション化されます。paddingFirefoxもアニメートする必要がありますが、そうではありません。

于 2012-08-07T21:28:25.310 に答える
0

ウィキペディアはほとんどのブラウザでアニメーション化されていませんが、続行しようとするアニメーションがあります。最初の手がかりは、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ブラウザーでも同じ効果が得られます。これに関するリファレンスはここにあります。お気づきのように、このtransitionsCSS3プロパティはまだ十分にサポートされていません。

このプロパティのサポートの詳細については、こちらを確認してください。

于 2012-08-07T21:35:40.260 に答える