別のコントロールでアニメーションをトリガーする (C#)

  • [アーティクル]

作成者: Christian Wenz

PDF のダウンロード

ASP.NET AJAX Control Toolkit の Animation コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 一般に、アニメーションの起動は、ユーザーが同じコントロールを操作することによってトリガーされます。 ただし、1 つのコントロールと対話してから、別のコントロールをアニメーション化することもできます。

概要

ASP.NET AJAX Control Toolkit の Animation コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 一般に、アニメーションの起動は、ユーザーが同じコントロールを操作することによってトリガーされます。 ただし、1 つのコントロールと対話してから、別のコントロールをアニメーション化することもできます。

手順

まず、ページに を 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>

パネルのアニメーション化を開始するために、HTML ボタンが使用されます。 ユーザーがその <input type="button" /> ボタンをクリックしたときにポストバックを望まないので、 が優先 <asp:Button /> されることに注意してください。

<input type="button" id="Button1" runat="server" Value="Launch Animation" />

次に、 をページに追加AnimationExtenderし、 属性と必須 runat="server"の を指定IDTargetControlIDします。 パネル (アニメーション化されている要素) の ID ではなく、ボタンの ID (アニメーションをトリガーする要素) に設定 TargetControlID することが重要です。

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">

ノード内に <Animations> 、通常どおりにアニメーションを配置します。 ボタンではなくパネルを変更するには、 内AnimationExtenderのすべてのアニメーション要素の 属性をAnimationTarget設定します。 の値 AnimationTarget は、もちろんパネルの ID です。 そうすることで、アニメーションはトリガー ボタンではなくパネルで行われます。 このシナリオのマークアップを AnimationExtender 次に示します。

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnClick>
 <Sequence>
 <EnableAction Enabled="false" />
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" AnimationTarget="Panel1" />
 <Resize Width="1000" Height="150" Unit="px" 
 AnimationTarget="Panel1" />
 </Parallel>
 </Sequence>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

個々のアニメーションが表示される特別な順序に注意してください。 まず、アニメーションが実行されると、ボタンは非アクティブになります。 要素に<EnableAction>属性がないためAnimationTarget、このアニメーションはボタンという元のコントロールに適用されます。 次の 2 つのアニメーション手順は、並列で実行する必要があります (<Parallel> 要素)。 どちらの属性も AnimationTarget に "Panel1"設定されているため、ボタンではなくパネルをアニメーション化します。

ボタンをマウスでクリックすると、パネル アニメーションが開始されます

ボタンをマウスでクリックすると、パネル アニメーションが開始されます (クリックするとフルサイズの画像が表示されます)

前へ次へ