动画UpdatePanels

Question

我尝试使用属于Ajax Control Toolkit的UpdatePanelAnimationExtender，但我最大的抱怨是它不会等到你的动画完成后再加载新内容。

我想做以下事情：

1. 启动对服务器的异步请求
2. 完全淡出UpdatePanel中的内容
3. 一旦UpdatePanel完全淡出并返回新内容，请加载新内容
4. 淡入UpdatePanel

我可以将以下代码放在启动回发的触发器上：

OnClientClick="Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(PauseForFade); FadeOut();"

有了这个，我还可以使用以下JavaScript取消任何进一步的处理：

function PauseForFade(sender, args) { args.set_cancel(true); }

我的问题是，一旦我的淡入淡出动画完成，我无法弄清楚如何恢复加载。任何帮助将不胜感激。

Answer 1

我想我找到了一个有效的解决方案。如果你们中有人有更好的解决方案，请随意加入。

在我的按钮中，我放置了以下OnClientClick事件处理程序：

OnClientClick="return FadeOut();"

调用下面的FadeOut方法，如果当前内容淡入并可见，则返回false。返回false完全取消了UpdatePanel将调用的异步回发。

动画完成后我将IsFadedIn变量设置为false并再次单击该按钮（我知道单击该按钮的代码现在不是跨浏览器兼容的，这只是一个概念证明，因此它的一部分需要修复）。由于IsFadedIn设置为false，因此这次FadeOut方法不返回false，因此UpdatePanel执行回发。

我有一个附加到pageLoaded事件的事件处理程序，这样一旦完成加载，我就可以淡化新内容。

好的：我现在可以在加载新内容之前完成动画。

糟糕：我必须等待动画完成才能开始回发过程，因此用户实际上必须等待一段时间。

var opacity = 100;
var IsFadedIn = true;

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(FadeIn);
function FadeIn(sender, args) {
  if (!IsFadedIn) {
    if (opacity < 100) {
      opacity += 15;
      $get("LowerPageContent").style.filter = "alpha(opacity=" + opacity + ")";
      setTimeout(FadeIn, 1);
    } else {
      $get("LowerPageContent").style.filter = "alpha(opacity=100)";
      IsFadedIn = true;
    }
  }
}
function FadeOut() {
  if (IsFadedIn) {
    if (opacity > 0) {
      opacity -= 15;
      $get("LowerPageContent").style.filter = "alpha(opacity=" + opacity + ")";
      setTimeout(FadeOut, 1);
    } else {
      $get("LowerPageContent").style.filter = "alpha(opacity=0)";
      IsFadedIn = false;
      $get("TestButton").click();
    }
    return false;
  }
}