我刚刚开始使用AnimationExtender。我使用它来显示一个新的div，当按下按钮时，它具有从数据库收集的列表。问题是该按钮需要执行回发操作才能获取此列表，因为除非我们需要，否则我不希望对其进行调用。但是，回发会停止动画的中间流程并将其重置。该按钮在更新面板中。

理想情况下，我希望动画在回发完成且列表已收集后就开始。我已经研究过使用" ScriptManager"来检测回发何时完成并取得了一些进展。我在页面中添加了两个javascript方法。

function linkPostback() {

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

    function playAnimation() {
        var onclkBehavior = $find("ctl00_btnOpenList").get_OnClickBehavior().get_animation();
        onclkBehavior.play();
    }

我已经更改了btnOpenList.OnClientClick = linkPostback();。

这几乎解决了问题。我仍然会遇到一些断断续续的动画。动画在回发之前开始播放，然后在回发之后正确播放。使用onclkBehavior.pause()无效。我可以通过设置AnimationExtender.Enabled = false并在按钮回发事件中将其设置为true来解决此问题。但是，此操作仅一次，因为现在再次启用了AnimationExtender。我也尝试通过javascript禁用" AnimationExtender"，但这无效。

有没有一种方法只能通过javascript调用来播放动画？我需要将自动链接解耦到
按钮点击事件，以便我可以控制何时触发动画。

希望这是有道理的。

谢谢

危险品

解决方案

回答

我们看到的流程是这样的：

• 点击按钮
• AnimationExtender捕获动作并调用clickOn回调
• linkPostback启动页面异步请求，然后将流返回给AnimationExtender
• 动画开始
• pageRequest返回并调用playAnimation，再次启动动画

我认为至少有两种方法可以解决此问题。看来我们几乎拥有了所有需要的JavaScript，我们只需要解决AnimationExtender并单击一下即可启动动画。

选项1：隐藏AnimationExtender按钮并添加自己的新按钮来播放动画。这应该像将AE按钮的样式设置为" display：none;"一样简单。并有自己的按钮调用linkPostback()。

选项2：动画完成后，请重新禁用动画扩展器。只要playAnimation调用处于阻塞状态，它就应该起作用，它可能是：

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;
}

顺便说一句，如果延迟接收pageRequest，似乎一般方法可能会遇到问题。单击一个按钮可能有点怪异，然后在几秒钟后发生动画。最好预先加载数据，或者用一些"正在加载..."的东西预填充div，使其大小正确，然后在到达时填充实际内容。

回答

在给出答案的帮助下，最终解决方案如下：

添加另一个按钮并将其隐藏。

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

将AnimationExtender指向隐藏按钮，这样就不会触发不需要的单击事件。

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

回传完成后，将javascript连线至我们要触发动画的按钮。

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

将所需的Javascript添加到页面。

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) 
}