Von einer Bedingung abhängige Animation (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. Ob eine Animation ausgeführt wird oder nicht, kann auch von einer Bedingung in Form von JavaScript-Code abhängen.
Ü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. Ob eine Animation ausgeführt wird oder nicht, kann auch von einer Bedingung in Form von JavaScript-Code abhängen.
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>
Fügen Sie dann der AnimationExtender Seite hinzu, und geben Sie ein ID, das TargetControlID Attribut und den Obligatorischen an. runat="server":
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
Verwenden Sie <OnLoad> innerhalb des <Animations> Knotens, um die Animationen auszuführen, nachdem die Seite vollständig geladen wurde. Anstelle einer der regulären Animationen kommt das <Condition> Element ins Spiel. Der als Wert des Attributs ConditionScript bereitgestellte JavaScript-Code wird zur Laufzeit ausgeführt. Wenn sie als true ausgewertet wird, wird die Animation ausgeführt, andernfalls nicht. Das folgende Markup bietet zwei Animationen, die jeweils in 50 % der Fälle nach dem Zufallsprinzip ausgeführt werden. Da nur eine Animation enthalten <OnLoad>sein darf, werden die beiden <Condition> Animationen mithilfe des <Sequence> -Elements miteinander verknüpft:
<ajaxToolkit:AnimationExtender ID="ae" runat="server"
TargetControlID="Panel1">
<Animations>
<OnLoad>
<Sequence>
<Condition ConditionScript="Math.random() < 0.5">
<Resize Width="1000" Height="150" Unit="px" />
</Condition>
<Condition ConditionScript="Math.random() < 0.5">
<FadeOut Duration="1.5" Fps="24" />
</Condition>
</Sequence>
</OnLoad>
</Animations>
</ajaxToolkit:AnimationExtender>
Beachten Sie, dass das Kleiner als-Zeichen (<) im ConditionScript Attribut mit escapezeichen () versehen sein muss. Wenn Sie dieses Skript ausführen, wird entweder keine Animation ausgeführt, oder einer der beiden oder beides.
Der Bereich wird ohne Größenänderung ausgeblendet, sodass die zweite Animation ausgeführt wird, die erste nicht (Klicken Sie, um das Bild in voller Größe anzuzeigen).
