ASP.NET (snapshot 2017) Microsoft documentation and samples

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)

Previous Next

Comments (

)

<00> <01> <02> <03> <04> <05> <06> <07> <08> <09> <10> <11> <12> <13> <14> <15> <16> <17> <18> <19> <20> <21> <22> <23>

Link to this page: //www.vb-net.com/AspNet-DocAndSamples-2017/aspnet/web-forms/overview/ajax-control-toolkit/animation/executing-several-animations-after-each-other-cs.htm