Traduction

Cet article est la traduction la plus fidèle possible de l'article original : Executing Several Animations after Each Other

Aperçu

Le contrôle Animation de l'AJAX Control Toolkit ASP.Net n'est pas seulement un contrôle, mais un Framework entier pour ajouter des animations à un contrôle. Il permet de lancer des animations les unes après les autres.

Étapes

Tout d'abord, ajouter le ScriptManager à la page ; alors seulement, la bibliothèque ASP.Net AJAX est chargée, rendant possible l'utilisation du Control Toolkit :

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

L'animation se voit appliqué à un panel 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> 

Dans la classe CSS associée au panel, définissez une belle couleur de fond et définissez une largeur fixe pour le panneau :

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

Alors, ajoutez un AnimationExtender sur la page, en fournissant un ID, l'attribut TargetControlID et l'attribut obligatoire runat="server":

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

À l'intérieur du noeud <Animations>, utilisez <OnLoad> pour lancer les animations une fois que la page a été entièrement chargée. Généralement, <OnLoad> n'accepte qu'une seule animation. Le Framework Animation permet de joindre plusieurs animations à l'aide de l'élément <Sequence>. Toutes les animations à l'intérieur de <Sequence> sont exécutées les unes après les autres. Voici un exemple de marquage possible pour le contrôle AnimationExtender, d'abord élargissant le panel, puis en diminuant sa hauteur :

 
Sélectionnez
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">      
	<Animations>           
		<OnLoad>                
			<Sequence>                     
				<Resize Width="1000" Unit="px" />                     
				<Resize Height="150" Unit="px" />                
			</Sequence>           
		</OnLoad>      
	</Animations> 
</ajaxToolkit:AnimationExtender> 

Lorsque vous lancez ce script, le panel devient plus large puis rétréci.

Image non disponible

Tout d'abord, la largeur est augmentée

Image non disponible

Puis la hauteur est diminuée.