c# - 动画扩展器问题

Answer 1

The flow you are seeing is something like this:

1. Click on button
2. AnimationExtender catches action and call clickOn callback
3. linkPostback starts asynchronous request for page and then returns flow to AnimationExtender
4. Animation begins
5. pageRequest returns and calls playAnimation, which starts the animation again

I think there are at least two ways around this issue. It seems you have almost all the javascript you need, you just need to work around AnimationExtender starting the animation on a click.

Option 1: Hide the AnimationExtender button and add a new button of your own that plays the animation. This should be as simple as setting the AE button's style to "display: none;" and having your own button call linkPostback().

Option 2: Re-disable the Animation Extender once the animation has finished with. This should work, as long as the playAnimation call is blocking, which it probably is:

function linkPostback() {

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(playAnimation)
}

function playAnimation() {

    AnimationExtender.Enabled = true;
    var onclkBehavior = $find("ctl00_btnOpenList").get_OnClickBehavior().get_animation();
    onclkBehavior.play();
    AnimationExtender.Enabled = false;
}

As an aside, it seems your general approach may face issues if there is a delay in receiving the pageRequest. It may be a bit weird to click a button and several seconds later have the animation happen. It may be better to either pre-load the data, or to pre-fill the div with some "Loading..." thing, make it about the right size, and then populate the actual contents when it arrives.

Answer 2

With help from the answer given the final solution was as follows:

Add another button and hide it.

<input id="btnHdn" runat="server" type="button" value="button" style="display:none;" />

Point the AnimationExtender to the hidden button so the firing of the unwanted click event never happens.

<cc1:AnimationExtender ID="aniExt" runat="server" TargetControlID="btnHdn">

Wire the javascript to the button you want to trigger the animation after the postback is complete.

<asp:ImageButton ID="btnShowList" runat="server" OnClick="btnShowList_Click" OnClientClick="linkPostback();" />

Add the required Javascript to the page.

function linkPostback() {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(playOpenAnimation)
}

function playOpenAnimation() {
    var onclkBehavior = ind("ctl00_aniExt").get_OnClickBehavior().get_animation();
    onclkBehavior.play();         

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.remove_endRequest(playOpenAnimation) 
}