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.

Überblick

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

Schließen Sie zunächst die ScriptManager auf der Seite ein. Dann wird die ASP.NET AJAX-Bibliothek geladen, sodass das Control Toolkit verwendet werden kann:

<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 den Bereich eine schöne Hintergrundfarbe, und legen Sie auch eine feste Breite für das Panel fest:

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

Um mit der Animation des Bereichs zu beginnen, wird eine HTML-Schaltfläche verwendet. Beachten Sie, dass bevorzugt <asp:Button /> wird, <input type="button" /> da wir kein Postback möchten, wenn der Benutzer auf diese Schaltfläche klickt.

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

Fügen Sie dann der AnimationExtender Seite hinzu, und geben Sie ein ID, das TargetControlID -Attribut und den obligatorischen runat="server"an. Es ist wichtig, auf die ID der Schaltfläche (das Element, das die Animation auslöst) und nicht auf die ID des Bereichs (das element, das animiert wird) festzulegen TargetControlID .

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

Platzieren Sie Animationen wie gewohnt innerhalb des <Animations> Knotens. Damit sie den Bereich und nicht die Schaltfläche ändern, legen Sie das AnimationTarget Attribut für jedes Animationselement in fest AnimationExtender. Der Wert für AnimationTarget ist natürlich die ID des Bereichs. Auf diese Weise erfolgen die Animationen im Bereich, 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 <EnableAction> -Element kein AnimationTarget Attribut vorhanden ist, wird diese Animation auf das ursprüngliche Steuerelement angewendet: die Schaltfläche. Die nächsten beiden Animationsschritte sind parallel durchzuführen (<Parallel> Element). Beide Attribute sind AnimationTarget auf "Panel1"festgelegt, wodurch der Bereich und nicht die Schaltfläche animiert werden.

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

ZurückWeiter