How To : Using MS AJAX CaseAnimation in your applications
I hang out at the forums a lot .( http://forums.asp.net/1022/ShowForum.aspx ), I go by phanatic.
Looking at a couple of threads let me know that there are no examples of the caseAnimation anywhere :-(
Ok, so I built a simple sample which illustrates the use of a CaseAnimation .
See demo here
So , here we go ....
1) Add a reference to the AjaxControlToolkit to your page.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>
2) Add the AnimationExtender's Markup.
<ajaxToolKit:AnimationExtender runat="server" ID="animateDiv" TargetControlID="btnAnimate">
3) We will trigger the animation on the Click of a button
<Animations> <OnClick>
4) The Markup for the Case Animation.
<Case SelectScript="ReturnAnimationIndexToPlay()" >
The SelectScript is used to return an index of the child animation to play.
The indices are Zero-based.
5) Under the Case Animation , we will put in a couple of child animations .
<Length Property="style" PropertyKey="height" Fps="50" duration="0.2" StartValue="400" EndValue="100" AnimationTarget="div1" ></Length> <Move duration="0.2" Horizontal="500" Vertical="300" Relative="false" AnimationTarget="div1" Unit="px"></Move> <FadeOut duration="0.2" MinimumOpacity ="0" MaximumOpacity="100" AnimationTarget="div1" ></FadeOut>
6) End Tags
</Case> </OnClick> </Animations> </ajaxToolKit:AnimationExtender>
7) The SelectScript Function , ReturnAnimationIndexToPlay.
<script language="javascript">
1:
2: var animIndex = -1;
3: function ReturnAnimationIndexToPlay()
4: {
5: animIndex++;
6: animIndex = ( animIndex ) % 3;
7: return animIndex;
8: }
9:
</script>
Complete Markup .
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %> <!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>Case Animation Demo</title> <link rel="stylesheet" href="../css/defaultStyles.css" type="text/css" /> <style> div { position:absolute;} </style> </head> <body> <form id="frmCaseAnimation" runat="server"> <script language="javascript"> var animIndex = -1; function ReturnAnimationIndexToPlay() { animIndex++; animIndex = ( animIndex ) % 3; return animIndex; } </script> <asp:ScriptManager runat="server" ID="ScrpManager"> </asp:ScriptManager> <asp:Button runat="server" ID="btnAnimate" OnClientClick="return false;" Text="Animate Using Case Animation" /> <ajaxToolKit:AnimationExtender runat="server" ID="animateDiv" TargetControlID="btnAnimate"> <Animations> <OnClick> <Case SelectScript="ReturnAnimationIndexToPlay()" > <Length Property="style" PropertyKey="height" Fps="50" duration="0.2" StartValue="400" EndValue="100" AnimationTarget="div1" ></Length> <Move duration="0.2" Horizontal="500" Vertical="300" Relative="false" AnimationTarget="div1" Unit="px"></Move> <FadeOut duration="0.2" MinimumOpacity ="0" MaximumOpacity="100" AnimationTarget="div1" ></FadeOut> </Case> </OnClick> </Animations> </ajaxToolKit:AnimationExtender> <div id="div1" runat="server" style="display: block; width: 100px; height: 400px; position: absolute; background-color: #000000; color: #FFCC00"> Paragraph One </div> </form> </body> </html>
Hope this helps.
Feel free to chime in with questions / comments.