Traduction

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

Étapes

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 :

 
Sélectionnez

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

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

 
Sélectionnez

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

 
Sélectionnez

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

 
Sélectionnez

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

 
Sélectionnez

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

Image non disponible
Le panneau est redimensionné, tout en disparaissant (y compris son contenu, grâce au moteur de rendu du navigateur)