Auslösen einer Animation in einem anderen Steuerelement (VB)

von Christian Wenz

PDF herunterladen

Das Animationssteuerelement im ASP.NET AJAX Control Toolkit ist nicht nur ein Steuerelement, sondern ein ganzes Framework zum Hinzufügen von Animationen zu einem Steuerelement. Im Allgemeinen wird das Starten einer Animation durch Benutzerinteraktionen mit demselben Steuerelement ausgelöst. Es ist jedoch auch möglich, mit einem Steuerelement zu interagieren und dann ein anderes Steuerelement zu animationen.

Übersicht

Das Animationssteuerelement im ASP.NET AJAX Control Toolkit ist nicht nur ein Steuerelement, sondern ein ganzes Framework zum Hinzufügen von Animationen zu einem Steuerelement. Im Allgemeinen wird das Starten einer Animation durch Benutzerinteraktionen mit demselben Steuerelement ausgelöst. Es ist jedoch auch möglich, mit einem Steuerelement zu interagieren und dann ein anderes Steuerelement zu animationen.

Schritte

Fügen Sie zunächst das ScriptManager in die Seite ein. Anschließend wird die ASP.NET AJAX-Bibliothek geladen, um das Steuerelement-Toolkit nutzen zu können.

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

Die Animation wird auf einen Textbereich angewendet, der wie folgt aussieht:

<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>

Definieren Sie in der zugeordneten CSS-Klasse für das Panel eine schöne Hintergrundfarbe und legen Sie außerdem eine feste Breite für das Panel fest:

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

Um mit der Animation des Panels zu beginnen, wird eine HTML-Schaltfläche verwendet. Beachten Sie, dass <input type="button" /> gegenüber <asp:Button /> bevorzugt wird, da wir keinen Postback wünschen, wenn der Benutzer auf diese Schaltfläche klickt.

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

Fügen Sie dann das AnimationExtender zur Seite hinzu, und geben Sie ein ID, das Attribut TargetControlID und die obligatorische runat="server" an. Es ist wichtig, TargetControlID auf die ID der Schaltfläche (das Element, das die Animation auslöst) zu setzen, nicht auf die ID des Panels (das Element, das animiert wird).

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

Platzieren Sie innerhalb des <Animations> Knotens Animationen wie gewohnt. Um den Bereich zu ändern und nicht die Schaltfläche, setzen Sie das AnimationTarget Attribut für jedes Animationselement innerhalb AnimationExtender fest. Der Wert für AnimationTarget ist natürlich die ID des Panels. Auf diese Weise erfolgen die Animationen mit dem Panel, nicht mit der auslösenden Schaltfläche. Hier sehen Sie das AnimationExtender Markup für dieses Szenario:

<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>

Beachten Sie die besondere Reihenfolge, in der die einzelnen Animationen angezeigt werden. Zunächst wird die Schaltfläche deaktiviert, sobald die Animation ausgeführt wird. Da im AnimationTarget Element kein <EnableAction> Attribut vorhanden ist, wird diese Animation auf das ursprüngliche Steuerelement angewendet: die Schaltfläche. Die nächsten beiden Animationsschritte werden parallel (<Parallel> Element) durchgeführt. Beide haben ihre AnimationTarget Attribute auf "Panel1" festgelegt, wodurch das Panel animiert wird, nicht die Schaltfläche.

Ein Mausklick auf die Schaltfläche startet die Panelanimation (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)