Déclencher une animation dans un autre contrôle

Cet article est la traduction la plus fidèle possible de l'article original : Triggering an Animation in another Control

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. En général, le lancement d'une animation est déclenché suite à l'interaction d'un utilisateur avec le même contrôle. Il est cependant aussi possible d'interagir avec un premier contrôle et pour l'animation avec un autre contrôle.

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 panel contenant du texte et qui ressemble au bout de code suivant :

<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>

Dans la classe CSS associée au panel, définissez une belle couleur et donnez une largeur fixe au panel :

<style type="text/css">
.panelClass
{
background-color: lime; 
width: 300px;
}
</style>

Pour commencer l'animation du panel, un bouton HTML est utilisé. Notez que la balise <input type="button" /> est préférée à la balise ASP.NET <asp:Button /> puisque nous ne voulons pas de postback lorsque l'utilisateur clique sur le bouton.

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

Ensuite, ajoutez le AnimationExtender à la page, renseignez les attributs ID et TargetControlID et insérez runat="server" qui est obligatoire. Il est important d'initialiser TargetControlID avec l'ID du bouton (L'élément déclenchant l'animation), et pas l'ID du panel (L'élément qui est animé).

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

Au sein de la balise <Animations>, placez des animations comme vous le faites habituellement. Pour permettre aux animations de changer le panel, pas le bouton, sttez l'attribut AnimationTarget pour chaque élément animation au sein de AnimationExtender. La valeur pour l'attribut AnimationTarget est évidemment l'ID du panel. De cette façon, les animations se produisent avec le panel, et non avec le déclenchement du bouton. Ci-dessous le balisage complet pour 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>

Notez l'ordre spécifique dans lequel les animations apparaissent. Pour commencer, le bouton est désactivé une fois que l'animation démarre. Puisqu'il y a aucun attribut AnimationTarget dans l'élément <EnableAction>, l'animation est appliquée au contrôle d'origine : le bouton. Les deux prochaines animations seront executes en parallèle (élément <Parallel>). Les deux ont leur attribut AnimationTarget initialize à "Panel1", ce qui animera le panel, et pas le bouton.

Un click de souris sur le bouton démarrera l'animation du panel.