アニメーション中のアクションを無効にする (C#)
作成者: Christian Wenz
ASP.NET AJAX Control Toolkit の Animation コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 また、マウス クリックなどのアクションもサポートしています。 ただし、マウス クリックによってアニメーションが開始される場合は、アニメーション中にマウス クリックを無効にすることが望ましいです。
概要
ASP.NET AJAX Control Toolkit の Animation コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 また、マウス クリックなどのアクションもサポートしています。 ただし、マウス クリックによってアニメーションが開始される場合は、アニメーション中にマウス クリックを無効にすることが望ましいです。
手順
まず、ページに ScriptManager を含めます。次に、ASP.NET AJAX ライブラリが読み込まれ、Control Toolkit を使用できるようになります。
<asp:ScriptManager ID="asm" runat="server" />
アニメーションは、次のように HTML ボタンに適用されます。
<input type="button" ID="Button1" runat="server" Value="Launch Animation" />
ボタンでポストバックを作成したくないため、Web コントロールの代わりに HTML コントロールが使用されることに注意してください。このコントロールでは、クライアント側のアニメーションが起動されるだけです。
次に、ID、TargetControlID 属性、必須の runat="server" を指定して、AnimationExtender をページに追加します。
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">
<Animations> ノード内では、<OnClick> はマウス クリックを処理するための適切な要素です。 ただし、アニメーション中にボタンをクリックすることもできます。 <EnableAction> 要素でそれを処理できます。 Enabled="false" を設定すると、アニメーションの一部としてボタンが無効になります。 (ボタンと実際のアニメーションを無効にする) 複数の個別のアニメーションを使用しているため、単一のアニメーションを 1 つに結合するには <Parallel> 要素が必要です。 AnimationExtender の完全なマークアップを以下に示します。
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">
<Animations>
<OnClick>
<Parallel>
<EnableAction Enabled="false" />
<FadeOut Duration="1.5" Fps="24" />
<Resize Width="1000" Height="150" Unit="px" />
</Parallel>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
また、次の XML 要素を一覧の末尾で使用して、アニメーションの後にボタンを再び有効にすることもできます。
<EnableAction Enabled="true" />
ただし、特定のシナリオでは、ボタンがフェードアウトし、アニメーションの最後に表示されないため、これは役に立ちません。
アニメーションが実行されるとすぐにボタンが無効になります (クリックするとフルサイズの画像が表示されます)
