div の高さと幅の変化をアニメーション化するにはどうすればよいですか? アニメーションをトリガーするイベントはありませんが、(this) div のサイズが変更されるたびにアニメーションが発生します。アイデアは、多かれ少なかれコンテンツが div にあるときに、div のサイズの変化をアニメーション化することです。
2 に答える
CSS3 トランジションは、確かにそれを行うための最も優れた方法です。非常にクリーンで、ブラウザーに作業を任せることができます。ただし、IE でのサポートが必要な場合は、jQuery animate を使用することをお勧めします。
div ではリッスンできずresize()
、ウィンドウだけであるため、それほど単純ではありません。
ただし、次のようないくつかのプラグインが利用可能です: http://www.jqui.net/demo/mutate/
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 ジェネレーターがあります。間違いなくお勧めします。