-1

div の高さと幅の変化をアニメーション化するにはどうすればよいですか? アニメーションをトリガーするイベントはありませんが、(this) div のサイズが変更されるたびにアニメーションが発生します。アイデアは、多かれ少なかれコンテンツが div にあるときに、div のサイズの変化をアニメーション化することです。

4

2 に答える 2

1

CSS3 トランジションは、確かにそれを行うための最も優れた方法です。非常にクリーンで、ブラウザーに作業を任せることができます。ただし、IE でのサポートが必要な場合は、jQuery animate を使用することをお勧めします。

div ではリッスンできずresize()、ウィンドウだけであるため、それほど単純ではありません。

ただし、次のようないくつかのプラグインが利用可能です: http://www.jqui.net/demo/mutate/

于 2012-10-24T08:58:33.570 に答える
1

CSS3 では、任意の要素に 'transition' プロパティを設定できます。これにより、イベントのトリガーについて心配する必要なく、必要な効果が得られます。

以下に示すように、アニメーションのプロパティ期間、および機能(タイプ) を指定できます。

#divWithAnimation
{
    transition: height 1s linear;
}  

プロパティ "transition" は IE ではサポートされていませんが、他のブラウザーでは次のように独自のプレフィックスが使用されます。

#divWithAnimation
{
  -webkit-transition: height 1s linear;
  -moz-transition: height 1s linear;
  -ms-transition: height 1s linear;
  -o-transition: height 1s linear;
  transition: height 1s linear;
}

利用可能なすべてのブラウザをサポートするには、スタイルシートでこれらすべてを使用する必要があります。トランジション (および CSS3 のその他の優れた機能) に関する詳細情報とチュートリアルは、W3Schools の Web サイトにあります。

すべてのブラウザーのコードを生成できる非常に優れたCSS3 ジェネレーターがあります。間違いなくお勧めします。

于 2012-10-24T08:07:16.853 に答える