Skip to content

Latest commit

 

History

History
60 lines (39 loc) · 3.23 KB

animating-in-response-to-user-interaction-vb.md

File metadata and controls

60 lines (39 loc) · 3.23 KB
Raw
uid title author description ms.author ms.date ms.assetid msc.legacyurl msc.type
web-forms/overview/ajax-control-toolkit/animation/animating-in-response-to-user-interaction-vb
Animating in Response To User Interaction (VB) | Microsoft Docs
wenz
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 animations can star... (VB)
riande
06/02/2008
c8204c05-ec27-40fe-933d-88e4e727a482
/web-forms/overview/ajax-control-toolkit/animation/animating-in-response-to-user-interaction-vb
authoredcontent

Animating in Response To User Interaction (VB)

by Christian Wenz

Download PDF

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 animations can start automatically or may be triggered by user interaction, e.g. by clicking with the mouse.

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 animations can start automatically or may be triggered by user interaction, e.g. by clicking with the mouse.

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]

The animation will be applied to a panel of text which looks like this:

[!code-aspxMain]

In the associated CSS class for the panel, define a nice background color and also set a fixed width for the panel:

[!code-cssMain]

Then, add the AnimationExtender to the page, providing an ID, the TargetControlID attribute and the obligatory runat="server":

[!code-aspxMain]

Within the <Animations> node, there are five ways to start the animation via user interaction (the missing element is <OnLoad> which is executed once the whole page has been fully loaded):

  • <OnClick> (mouse click on the control)
  • <OnHoverOut> (mouse leaves the control)
  • <OnHoverOver> (mouse hovers over a control, stopping the <OnHoverOut> animation)
  • <OnMouseOut> (mouse leaves a control)
  • <OnMouseOver> (mouse hovers over a control, not stopping the <OnMouseOut> animation)

In this scenario, <OnClick> is used. When the user clicks on the panel, it is resized and fades out at the same time.

[!code-aspxMain]

A mouse click starts the animation

A mouse click starts the animation (Click to view full-size image)

[!div class="step-by-step"] Previous Next