Exécution d'animations en utilisant du code côté client

Cet article est la traduction la plus fidèle possible de l'article original : Executing Animations Using Client-Side Code

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. L'exécution de l'animation peut aussi être déclenchée en utilisant du code JavaScript côté client.

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>

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="Panel1">

A l'intérieur de la balise <Animations>, utilisez <OnClick> pour lancer l'animation une fois que l'utilisateur click sur le panel. Ajoutez deux animations qui seront exécutées en parallèle :

	<Animations>
		<OnClick>
			<Parallel>
				<FadeOut Duration="1.5" Fps="24" />
				<Resize Width="1000" Height="150" Unit="px" />
			</Parallel>
		</OnClick>
	</Animations>
</ajaxToolkit:AnimationExtender>

Pour l'intérêt de la démonstration, cette animation (et n'importe quelle autre animation créée en utilisant le Control Toolkit) est exécutée en utilisant du code JavaScript, dès que la page démarre. Tout d'abord, nous avons besoin d'accéder au contrôle AnimationExtender. La librairie ASP.NET AJAX fournit la fonction $find() pour cette tâche :

var ae = $find("ae");

Le contrôle AnimationExtender expose un API riche, qui incluent des méthodes avec des noms identiques aux noms des événements utilisés dans le balisage XML : OnClick(), OnLoad(), and ainsi de suite. Par exemple, un appel à la méthode OnClick() exécute l'animation à l'intérieur de l'élément <OnClick> du contrôle AnimationExtender :

ae.OnClick();

Voici le code JavaScript côté client complet qui émule le click sur le panel une fois que la page a été complètement chargée - notez que la fonction pageLoad() est utilisée suite à l'appel de ASP.NET AJAX une fois que la page et toutes les librairies JavaScript ont été chargées.

<script type="text/javascript">
function pageLoad()
{
	var ae = $find("ae");
	ae.OnClick();
}
</script>

L'animation démarre immédiatement, sans click avec la souris.