Attivazione di un'animazione in un altro controllo (VB)

di Christian Wenz

Scarica il PDF

Il controllo Animation nel ASP.NET AJAX Control Toolkit non è solo un controllo, ma un intero framework per aggiungere animazioni a un controllo. In genere, l'avvio di un'animazione viene attivato dall'interazione dell'utente con lo stesso controllo. È tuttavia anche possibile interagire con un controllo e quindi animazionere un altro controllo.

Panoramica

Il controllo Animation nel ASP.NET AJAX Control Toolkit non è solo un controllo, ma un intero framework per aggiungere animazioni a un controllo. In genere, l'avvio di un'animazione viene attivato dall'interazione dell'utente con lo stesso controllo. È tuttavia anche possibile interagire con un controllo e quindi animazionere un altro controllo.

Passaggi

Prima di tutto, includere nella ScriptManager pagina; quindi, la libreria ASP.NET AJAX viene caricata, rendendo possibile l'uso di 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>

Per avviare l'animazione del pannello, viene usato un pulsante HTML. Si noti che <input type="button" /> è favorito rispetto <asp:Button /> perché non si vuole un postback quando l'utente fa clic su tale pulsante.

<input type="button" id="Button1" runat="server" Value="Launch Animation" />

Aggiungere quindi alla AnimationExtender pagina , specificando un ID, l'attributo e l'oggetto TargetControlIDrunat="server"obbligatorio . È importante impostare TargetControlID l'ID del pulsante (l'elemento che attiva l'animazione), non sull'ID del pannello (l'elemento animato)

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

All'interno del <Animations> nodo posizionare le animazioni come di consueto. Per apportare modifiche al pannello, non al pulsante, impostare l'attributo AnimationTarget per ogni elemento di animazione all'interno di AnimationExtender. Il valore per AnimationTarget è l'ID del pannello, naturalmente. In questo modo, le animazioni avvengono con il pannello, non con il pulsante di attivazione. Ecco il AnimationExtender markup per questo scenario:

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnClick>
 <Sequence>
 <EnableAction Enabled="false" />
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" AnimationTarget="Panel1" />
 <Resize Width="1000" Height="150" Unit="px" 
 AnimationTarget="Panel1" />
 </Parallel>
 </Sequence>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

Si noti l'ordine speciale in cui vengono visualizzate le singole animazioni. Prima di tutto, il pulsante viene disattivato dopo l'esecuzione dell'animazione. Poiché nell'elemento <EnableAction> non è presente alcun AnimationTarget attributo, questa animazione viene applicata al controllo di origine: il pulsante . I due passaggi successivi dell'animazione devono essere eseguiti in parallelo (<Parallel> elemento ). Entrambi hanno AnimationTarget gli attributi impostati su "Panel1", quindi animando il pannello, non il pulsante .

Un clic del mouse sul pulsante avvia l'animazione del pannello (fare clic per visualizzare l'immagine a dimensione intera)

IndietroAvanti