Esecuzione di diverse animazioni una dopo l'altra (VB)
Il controllo Animazione nel ASP.NET AJAX Control Toolkit non è solo un controllo ma un intero framework per aggiungere animazioni a un controllo. Consente di eseguire diverse animazioni una dopo l'altra.
Panoramica
Il controllo Animazione nel ASP.NET AJAX Control Toolkit non è solo un controllo ma un intero framework per aggiungere animazioni a un controllo. Consente di eseguire diverse animazioni una dopo l'altra.
Passaggi
Prima di tutto, includere nella ScriptManager pagina; quindi, la libreria ASP.NET AJAX viene caricata, rendendo possibile usare Control Toolkit:
<asp:ScriptManager ID="asm" runat="server" />
L'animazione verrà applicata a un pannello di testo simile al seguente:
<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>
Nella classe CSS associata per il pannello definire un bel colore di sfondo e impostare anche una larghezza fissa per il pannello:
<style type="text/css">
.panelClass {background-color: lime; width: 300px;}
</style>
Aggiungere quindi l'oggetto AnimationExtender alla pagina, specificando un IDattributo e l'attributo TargetControlID obbligatorio runat="server":
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
All'interno del <Animations> nodo, usare <OnLoad> per eseguire le animazioni dopo che la pagina è stata completamente caricata. In genere, <OnLoad> accetta solo un'animazione. Il framework di animazione consente di aggiungere diverse animazioni a uno usando l'elemento <Sequence> . Tutte le animazioni all'interno <Sequence> vengono eseguite una dopo l'altra. Ecco il markup possibile per il controllo, rendendo il pannello più ampio e quindi riducendone l'altezza AnimationExtender :
<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>
Quando si esegue questo script, il pannello diventa prima più ampio e quindi più piccolo.
Prima di tutto la larghezza viene aumentata (fare clic per visualizzare l'immagine full-size)
L'altezza viene quindi ridotta (fare clic per visualizzare l'immagine full-size)
