Partager via

Animation dépendant d’une condition (VB)

  • Article

par Christian Wenz

Télécharger le PDF

Le contrôle Animation dans le ASP.NET ajax Control Toolkit 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 peut également dépendre d’une condition sous la forme d’un code JavaScript.

Vue d’ensemble

Le contrôle Animation dans le ASP.NET ajax Control Toolkit 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 peut également dépendre d’une condition sous la forme d’un code JavaScript.

Étapes

Tout d’abord, incluez le ScriptManager dans la page ; puis, le ASP.NET bibliothèque AJAX est chargé, ce qui permet d’utiliser control Toolkit :

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

L’animation 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>

Dans la classe CSS associée pour le panneau, définissez une couleur d’arrière-plan agréable et définissez également une largeur fixe pour le panneau :

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

Ensuite, ajoutez le AnimationExtender à la page, en fournissant un ID, l’attribut TargetControlID et le obligatoire runat="server":

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

Dans le <Animations> nœud, utilisez <OnLoad> pour exécuter les animations une fois que la page a été entièrement chargée. Au lieu de l’une des animations régulières, l’élément <Condition> entre en jeu. Le code JavaScript fourni comme valeur de l’attribut ConditionScript est exécuté au moment de l’exécution. Si elle prend la valeur true, l’animation est exécutée, sinon pas. Le balisage suivant fournit deux animations, chacune d’entre elles étant exécutée dans 50 % des cas au hasard. Étant donné qu’il ne peut y avoir qu’une seule animation dans <OnLoad>, les deux <Condition> animations sont jointes à l’aide de l’élément <Sequence> :

<ajaxToolkit:AnimationExtender ID="ae" runat="server"
 TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <Sequence>
 <Condition ConditionScript="Math.random()   0.5">
 <Resize Width="1000" Height="150" Unit="px" />
 </Condition>
 <Condition ConditionScript="Math.random()   0.5">
 <FadeOut Duration="1.5" Fps="24" />
 </Condition>
 </Sequence>
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

Notez que le signe inférieur à (<) de l’attribut doit être placé dans une ConditionScript séquence d’échappement (). Lorsque vous exécutez ce script, aucune animation ne s’exécute, ou l’une des deux le fait, ou les deux.

Le panneau s’estompe sans redimensionnement, de sorte que la deuxième animation s’exécute, la première n’a pas

Le panneau s’estompe sans redimensionnement, de sorte que la deuxième animation s’exécute, la première ne l’a pas fait (cliquer pour afficher l’image en taille réelle)

PrécédentSuivant