Auslösen einer Animation in einem anderen Steuerelement (C#)
von Christian Wenz
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 benutzerinteraktion 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 benutzerinteraktion 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 die ScriptManager in die Seite ein. Dann wird die ASP.NET AJAX-Bibliothek geladen, sodass Sie das Control Toolkit verwenden 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 den Bereich eine schöne Hintergrundfarbe, und legen Sie auch eine feste Breite für den Bereich fest:
<style type="text/css">
.panelClass {background-color: lime; width: 300px;}
</style>
Um mit dem Animieren des Bereichs zu beginnen, wird eine HTML-Schaltfläche verwendet. Beachten Sie, dass <input type="button" /> bevorzugt wird <asp: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, 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 AnimationExtenderfest. 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 werden parallel<Parallel> ( Element) durchgeführt. Beide Attribute sind AnimationTarget auf "Panel1"festgelegt, wodurch der Bereich und nicht die Schaltfläche animiert wird.
Ein Mausklick auf die Schaltfläche startet die Panelanimation (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)
