Exécution de plusieurs animations l’une après l’autre (VB)

par Christian Wenz

Télécharger le PDF

Le contrôle Animation du ASP.NET AJAX Control Toolkit n’est pas seulement un contrôle, mais un framework entier permettant d’ajouter des animations à un contrôle. Il permet d’exécuter plusieurs animations l’une après l’autre.

Vue d’ensemble

Le contrôle Animation du ASP.NET AJAX Control Toolkit n’est pas seulement un contrôle, mais un framework entier permettant d’ajouter des animations à un contrôle. Il permet d’exécuter plusieurs animations l’une après l’autre.

Étapes

Tout d’abord, incluez le ScriptManager dans la page ; ensuite, 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 l’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 la page entièrement chargée. En règle générale, <OnLoad> n’accepte qu’une seule animation. L’infrastructure Animation vous permet de joindre plusieurs animations en une seule à l’aide de l’élément <Sequence> . Toutes les animations dans <Sequence> sont exécutées l’une après l’autre. Voici le balisage possible pour le AnimationExtender contrôle, d’abord en élargissant le panneau, puis en diminuant sa hauteur :

<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 exécutez ce script, le panneau devient d’abord plus large, puis plus petit.

Tout d’abord, la largeur est augmentée (cliquez pour afficher l’image en taille réelle)

Ensuite, la hauteur est réduite (cliquez pour afficher l’image en taille réelle)

PrécédentSuivant