Animation basée sur une condition

Date de publication : mai 2009

Par Christian Wenz
 Louis-Guillaume MORAND (Traduction) (Page perso de Louis-Guillaume MORAND)
 

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. L'exécution ou non d'une animation dépend d'une condition base sur une sorte de code JavaScript.

               Version PDF (Miroir)   Version hors-ligne (Miroir)

Traduction
Aperçu
Étapes


Traduction

Cet article est la traduction la plus fidèle possible de l'article original : en Animation Depending On a Condition


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. L'exécution ou non d'une animation dépend d'une condition base sur une sorte de code JavaScript.


É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 : 
<asp:ScriptManager ID="asm" runat="server" />
L'animation se voit appliqué à un panel 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>
Dans la classe CSS associée au panel, définissez une belle couleur de fond et définissez une largeur fixe pour le panneau : 
<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": 
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
À l'intérieur du nœud <Animations>, utilisez <OnLoad> pour lancer les animations une fois que la page a été entièrement chargée. A la place des animations habituelles, l'élément <Condition> entre en jeu. Le code JavaScript fourni en tant que valeur de votre attribut ConditionScript est exécuté au runtime. Si la condition est vérifiée, l'animation est exécutée, sinon non. Le marquage suivant fournit deux animations, chacune d'entre elles est exécutée aléatoirement dans 50% des cas. Comme il ne peut y avoir qu'une seule animation à l'intérieur de l'élément <OnLoad>, les deux animations <Conditions> sont jointes en utilisant l'élément <Sequence> : 
<ajaxToolkit:AnimationExtender ID="ae" runat="server"      TargetControlID="Panel1">      
	<Animations>           
		<OnLoad>                
			<Sequence>                    
				<Condition ConditionScript="Math.random() &lt; 0.5">                          
					<Resize Width="1000" Height="150" Unit="px" />                     
				</Condition>                     
				<Condition ConditionScript="Math.random() &lt; 0.5">                          
					<FadeOut Duration="1.5" Fps="24" />                     
				</Condition>                
			</Sequence>           
		</OnLoad>      
	</Animations> 
</ajaxToolkit:AnimationExtender>
Notez que le signe inferieur à (<) dans l'attribut ConditionScript doit être échappé. Lorsque vous lancez ce script, soit aucune animation ne se lance, ou l'une des deux ou les deux.

Le panel disparait sans changer de taille donc la seconde animation s'exécute, mais pas la première.



               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.1!Valid CSS!

Copyright © 2009 Equipe Dotnet. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC. Cette page est déposée.

 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum Microsoft DotNET

Blogs

Hébergement

 
Partenaires

Hébergement Web