Exécuter plusieurs animations en même temps

Cet article est la traduction la plus fidèle possible de l'article original : Executing Several Animations at The Same Time

Tout d'abord, incluez le contrôle ScriptManager dans la page, ce qui permet de charger la bibliothèque ASP.NET AJAX, et d'utiliser le Control Toolkit :

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

L'animation de notre scénario sera appliquée à un panneau de texte qui ressemble à ceci :

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

La classe CSS associée au panneau définit une belle couleur de fond, et une largeur fixe pour le panneau :

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

Ensuite, ajoutez un contrôle AnimationExtender à la page, en lui donnant un ID, l'attribut TargetControlID, et le runat="server" obligatoire :

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

Dans le noeud <Animations>, utiliser <OnLoad> permet de lancer une animation une fois que la page a été entièrement chargée. En règle générale, <OnLoad> accepte une seule animation. Le Framework Animation vous permet de joindre plusieurs animations en une seule en utilisant les éléments <Parallel>. Toutes les animations dans un élément <Parallel> sont exécutées au même moment.

Voici un ensemble de balises possible pour le contrôle AnimationExtender, qui va en même temps redimensionner le panneau, et le faire disparaître :

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

Et en effet : lorsque vous exécutez ce script, le panneau est affiché, puis redimensionné (sa largeur est plus quee triplée, tandis que sa hauteur est divisée par deux), et disparaît en même temps.