Question

我刚开始使用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通话播放动画？我需要将自动链接解耦到按钮单击事件，以便我可以控制何时触发动画。

希望这是有道理的。

由于

DG

Answer 1

您看到的流程是这样的：

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

我认为围绕这个问题至少有两种方法。看起来你几乎拥有了所需的所有javascript，你只需要动画一下CreativeExtender即可开始动画。

选项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，使其大小合适，然后在到达时填充实际内容。

Answer 2

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

添加另一个按钮并隐藏它。

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

动画扩展器问题

2 个答案: