How to use Animation Extender in Asp.net Ajax
The
AnimationExtender is a simple extender that
allows you to utilize the powerful animation framework with existing pages in
an easy, declarative fashion. It plays animations whenever a specific event
like OnLoad, OnClick,
OnMouseOver, or OnMouseOut
is raised by the target control.
To
implement this concept you need to follow the below steps
Step1:
Create
a new Asp.net website in Visual Studio and write the following Source code in
the design part of the Default.aspx page.
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.flyOutDiv
{
display: none;
position: absolute;
width: 400px;
z-index: 3;
font-size: 14px;
border: solid 1px #CCCCCC;
background-color: #FFFFFF;
padding: 5px;
}
.flyOutDivCloseX
{
background-color: #666666;
color: #FFFFFF;
text-align: center;
font-weight: bold;
text-decoration: none;
border: outset thin #FFFFFF;
padding: 5px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:LinkButton ID="lnkBtnColHelp" runat="server" Text="Click Here" OnClientClick="return
false;" />
<div id="moveMe" class="flyOutDiv">
<div style="float:right;">
<asp:LinkButton ID="lnkBtnCloseColHelp" runat="server" Text="X" CssClass="flyOutDivCloseX" />
</div>
<p>
Microsoft Silverlight is an application framework for writing and
running rich Internet applications, with features and
purposes similar to those of Adobe Flash.current versions support
multimedia, graphics and animation, and give developers
support for CLI languages and development tools. Silverlight is also
one of the two application development platforms for Windows Phone.
</p>
</div>
</div>
<div>
<asp:AnimationExtender ID="AnimationExtender1" runat="server"
TargetControlID="lnkBtnColHelp">
<Animations>
<OnClick>
<Sequence>
<EnableAction Enabled="false"></EnableAction>
<StyleAction AnimationTarget="moveMe" Attribute="display" Value="block"/>
<Parallel AnimationTarget="moveMe" Duration=".5" Fps="30">
<Move Horizontal="200" Vertical="50"></Move>
<FadeIn Duration=".5"/>
</Parallel>
<Parallel AnimationTarget="moveMe" Duration=".5">
<Color PropertyKey="color" StartValue="#666666" EndValue="#FF0000" />
<Color PropertyKey="borderColor" StartValue="#666666" EndValue="#FF0000" />
</Parallel>
</Sequence>
</OnClick>
</Animations>
</asp:AnimationExtender>
</div>
<div>
<asp:AnimationExtender ID="AnimationExtender2" runat="server"
TargetControlID="lnkBtnCloseColHelp">
<Animations>
<OnClick>
<Sequence AnimationTarget="moveMe">
<Parallel AnimationTarget="moveMe" Duration=".7" Fps="20">
<Move Horizontal="200" Vertical="50"></Move>
<Scale ScaleFactor="0.05" FontUnit="px" />
<Color PropertyKey="color" StartValue="#FF0000" EndValue="#666666" />
<Color PropertyKey="borderColor" StartValue="#FF0000" EndValue="#666666" />
<FadeOut />
</Parallel>
<StyleAction Attribute="display" Value="none"/>
<StyleAction Attribute="height" Value=""/>
<StyleAction Attribute="width" Value="200px"/>
<StyleAction Attribute="fontSize" Value="10px"/>
<EnableAction AnimationTarget="lnkBtnColHelp" Enabled="true" />
</Sequence>
</OnClick>
</Animations>
</asp:AnimationExtender>
</div>
</form>
</body>
</html>
|
Step2:
Now build the Solution and
Debug it for the output.
DEMO:
No comments:
Post a Comment