Executing Several Animations after Each Other (C#)
The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. It allows to run several animations one after the other.
The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. It allows to run several animations one after the other.
Steps
First of all, include the ScriptManager in the page; then, the ASP.NET AJAX library is loaded, making it possible to use the Control Toolkit:
[!code-aspxMain]
1: <asp:ScriptManager ID="asm" runat="server" />
The animation will be applied to a panel of text which looks like this:
[!code-aspxMain]
1: <asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
2: ASP.NET AJAX is a free framework for quickly creating a new generation of more
3: efficient, more interactive and highly-personalized Web experiences that work
4: across all the most popular browsers.<br />
5: ASP.NET AJAX is a free framework for quickly creating a new generation of more
6: efficient, more interactive and highly-personalized Web experiences that work
7: across all the most popular browsers.<br />
8: ASP.NET AJAX is a free framework for quickly creating a new generation of more
9: efficient, more interactive and highly-personalized Web experiences that work
10: across all the most popular browsers.<br />
11: </asp:Panel>
In the associated CSS class for the panel, define a nice background color and also set a fixed width for the panel:
[!code-cssMain]
1: <style type="text/css">
2: .panelClass {background-color: lime; width: 300px;}
3: </style>
Then, add the AnimationExtender to the page, providing an ID, the TargetControlID attribute and the obligatory runat="server":
[!code-aspxMain]
1: <ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
Within the <Animations> node, use <OnLoad> to run the animations once the page has been fully loaded. Generally, <OnLoad> only accepts one animation. The Animation framework allows you to join several animations into one using the <Sequence> element. All animations within <Sequence> are executed one after the other. Here is the a possible markup for the AnimationExtender control, first making the panel wider and then decreasing its height:
[!code-aspxMain]
1: <ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
2: <Animations>
3: <OnLoad>
4: <Sequence>
5: <Resize Width="1000" Unit="px" />
6: <Resize Height="150" Unit="px" />
7: </Sequence>
8: </OnLoad>
9: </Animations>
10: </ajaxToolkit:AnimationExtender>
When you run this script, the panel first gets wider and then smaller.
First the width is increased (Click to view full-size image)
Then the height is decreased (Click to view full-size image)
)
|
|