Désactiver des actions lors d'une animation

Cet article est la traduction la plus fidèle possible de l'article original : Disabling Actions during Animation

Le contrôle Animation de l'ASP.NET AJAX Control toolkit n'est pas seulement un contrôle mais un framework pour ajouter des animations à un contrôle. Il y a aussi le support d'actions, comme les clics de la souris. Pourtant, lorsqu'un clic de souris démarre une animation, il est souhaitable de désactiver les clics de souris durant l'animation.

Pour commencer, il faut inclure le ScriptManager dans la page ; l'ASP.NET AJAX library est ensuite chargé, rendant possible l'utilisation du Control Toolkit :

<asp:ScriptManager ID="asm" runat="server" />

L'animation s'appliquera à un bouton HTML comme ceci :

<input type="button" ID="Button1" runat="server" Value="Lancer Animation" />

Notez qu'un contrôle HTML est utilisé à la place d'un contrôle web puisque nous ne voulons pas qu'un postback soit créé par le bouton ; une animation côté client pourra être ainsi lancée pour nous.

Ensuite, ajoutez l'AnimationExtender à la page, renseignez les attributs ID et TargetControlID et insérez runat="server" qui est obligatoire :

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

A l'intérieur de la balise <Animations>, <OnClick> est l'élément approprié pour intercepter le clic de souris. Cependant, le bouton pourrait être cliqué durant l'animation. L'élément <EnableAction> peut s'occuper de ça. L'attribut Enabled="false" désactive le bouton dans le cadre de l'animation. Puisque nous utilisons plusieurs animations individuelles (en désactivant le bouton et les animations actuelles), l'élément <Parallel> est obligatoire pour attacher l'ensemble des animations en une. Ci-dessous le balisage complet pour 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>

Il serait aussi possible de réactiver le bouton après l'animation, en utilisant l'élément XML suivant à la fin de la liste :

<EnableAction Enabled="true" />

Cependant, dans le scénario donné, ceci serait inutile puisque le bouton se ferme et n'est donc pas visible à la fin de l'animation.

Le bouton est désactivé dès que l'animation démarre.