Now there is a scenario: When the AnimationExtender is completed, how can we do some JavaScript? For example:
<asp:ImageButton ID="ib1" ImageUrl="~/images/AJAX.gif" OnClientClick="return false;" Height="100px" Width="100px" runat="server" />
<ajaxToolkit:AnimationExtender id="OpenAnimation" runat="server" BehaviorID="AnimationBehavior" TargetControlID="ib1" >
<Animations>
<OnClick>
<Sequence>
<EnableAction Enabled="false" />
<Pulse Duration=".1" />
<Parallel AnimationTarget="ib1" Duration=".3" Fps="30">
<FadeOut />
<Scale ScaleFactor="5" Unit="px" Center="true" ScaleFont="true" FontUnit="pt" />
</Parallel>
<StyleAction Attribute="postbackurl" Value="~/Default.aspx"/>
</Sequence>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
<ajaxToolkit:AnimationExtender id="OpenAnimation" runat="server" BehaviorID="AnimationBehavior" TargetControlID="ib1" >
<Animations>
<OnClick>
<Sequence>
<EnableAction Enabled="false" />
<Pulse Duration=".1" />
<Parallel AnimationTarget="ib1" Duration=".3" Fps="30">
<FadeOut />
<Scale ScaleFactor="5" Unit="px" Center="true" ScaleFont="true" FontUnit="pt" />
</Parallel>
<StyleAction Attribute="postbackurl" Value="~/Default.aspx"/>
</Sequence>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
With the above sample, it will do Animation after you click the imagebutton. But now, we want to make it redirect to a new page after clicking the imagebutton and completing the Animation. If you define imagebutton OnClick event, it will not be triggered because OnClientClick returns false. If you remove out OnClientClick="return false;", it will do postback directly when you click the button, rather than waiting the completion of animation. Maybe we can call some client event, which will be triggered after AnimationExtender is completed. But the problem is AnimationBehavior hasn't any client event about onCompleted.
Actually, I'd like to make a way to achieve it: we can build an Animation object to contact with the AnimationBehavior, receive the Animation instance from it and declare OnEnd client event of Animation object.
<script type="text/javascript">
function pageLoad() {
var animation =$find('AnimationBehavior')._onClick.get_animation();
animation.add_ended(onend);
}
function onend() {
window.location.href = "../../../Default.aspx";
}
</script>
function pageLoad() {
var animation =$find('AnimationBehavior')._onClick.get_animation();
animation.add_ended(onend);
}
function onend() {
window.location.href = "../../../Default.aspx";
}
</script>
Now, after you click the imagebutton, it will do the Animation. After anything is completed, it will go to the new page.
