複数のアニメーションを同時に実行する (C#)
作成者: Christian Wenz
ASP.NET AJAX Control Toolkit のアニメーション コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 これにより複数のアニメーションを並行して実行できます。
概要
ASP.NET AJAX Control Toolkit のアニメーション コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 これにより複数のアニメーションを並行して実行できます。
手順
まず、ページに ScriptManager を含めます。これにより、ASP.NET AJAX ライブラリが読み込まれ、Control Toolkit を使用できるようになります。
<asp:ScriptManager ID="asm" runat="server" />
アニメーションは、次のようなテキストのパネルに適用されます。
<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
more interactive and highly-personalized Web experiences that work across all the
most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
more interactive and highly-personalized Web experiences that work across all the
most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
more interactive and highly-personalized Web experiences that work across all the
most popular browsers.<br />
</asp:Panel>
パネルに関連付けられている CSS クラスで、適切な背景色を定義し、パネルの固定幅も設定します。
<style type="text/css">
.panelClass {background-color: lime; width: 300px;}
</style>
次に、ID、TargetControlID 属性、必須の runat="server" を指定して、AnimationExtender をページに追加します。
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
<Animations> ノード内で、ページが完全に読み込まれたら <OnLoad> を使用してアニメーションを実行します。 一般に、<OnLoad> は 1 つのアニメーションのみを受け入れます。 アニメーション フレームワークを使用すると、<Parallel> 要素を使用して複数のアニメーションを 1 つに結合できます。 <Parallel> 内のすべてのアニメーションが同時に実行されます。
以下は、AnimationExtender コントロールで使用できるマークアップです。パネルのフェードアウトとサイズ変更を同時に行います。
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
<Animations>
<OnLoad>
<Parallel>
<FadeOut Duration="1.5" Fps="24" />
<Resize Width="1000" Height="150" Unit="px" />
</Parallel>
</OnLoad>
</Animations>
</ajaxToolkit:AnimationExtender>
実際、このスクリプトを実行すると、パネルが表示され、サイズが変更され (幅が 3 倍以上、高さが半減)、同時にフェードアウトします。
パネルがフェードアウトし、サイズが変更されています (ブラウザーのレンダリング エンジンによってそのコンテンツが含まれます) (クリックするとフルサイズの画像が表示されます)
