动画扩展器问题

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

希望这是有道理的。

谢谢

总干事

Answer 1

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

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

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

Answer 2

您看到的流程是这样的：

1. 单击按钮
2. AnimationExtender 捕获操作并调用 clickOn 回调
3. linkPostback 启动页面的异步请求，然后将流程返回给 AnimationExtender
4. 动画开始
5. 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 中预先填充一些“正在加载...”的内容，使其大小合适，然后在实际内容到达时填充它。