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 |
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.
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.
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 (Click to view full-size image)