ASP.NET (snapshot 2017) Microsoft documentation and samples

Picking One Animation Out Of a List (VB)

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. The framework also allows the programmer to pick one animation out of a list of animations, depending on the evaluation of some JavaScript code.

Overview

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. The framework also allows the programmer to pick one animation out of a list of animations, depending on the evaluation of some JavaScript code.

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. Instead of one of the regular animations, the <Case> element comes into play. The value of its SelectScript attribute is evaluated; the return value must be numerical. Depending on this number, one of the subanimations within <Case> is executed. For instance, if SelectScript evaluates to 2, the Control Toolkit runs the third animation within <Case> (counting starts at 0).

The following markup defines three subanimations: Resizing the width, resizing the height, and fading out. The JavaScript code (Math.floor(3 * Math.random())) then picks a number between 0 and 2, so that one of the three animations is run:

[!code-aspxMain]

   1:  <ajaxToolkit:AnimationExtender ID="ae" runat="server"

   2:   TargetControlID="Panel1">

   3:   <Animations>

   4:   <OnLoad>

   5:   <Case SelectScript="Math.floor(3 * Math.random())">

   6:   <Resize Width="1000" Unit="px" />

   7:   <Resize Height="150" Unit="px" />

   8:   <FadeOut Duration="1.5" Fps="24" />

   9:   </Case>

  10:   </OnLoad>

  11:   </Animations>

  12:  </ajaxToolkit:AnimationExtender>

One of the possible three animations: The panel gets wider (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/picking-one-animation-out-of-a-list-vb.htm