Animating UpdatePanels

Question

I've tried using the UpdatePanelAnimationExtender that is part of the Ajax Control Toolkit, but the biggest complaint I have with it is that it doesn't wait for your animation to finish before loading in the new content.

I would like to do something like the following:

1. Start Async request to server
2. Fade out the content in the UpdatePanel completely
3. Once the UpdatePanel is completely faded out and the new content is returned, load in the new content
4. Fade in the UpdatePanel

I can put the following code on the trigger that starts the postback:

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

With that I can also have the following JavaScript that will cancel any further processing:

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

My problem is that I can't figure out how to resume the loading once my fade animation is done. Any help would be appreciated.

Answer 1

I think I found a solution that works. Feel free to chime in if any of you have a better solution.

In my button I placed the following OnClientClick event handler:

OnClientClick="return FadeOut();"

That calls my FadeOut method below which returns false if the current content is faded in and visible. Returning false cancels altogether the asynchronous postback that the UpdatePanel would have invoked.

Once the animation is done I set the IsFadedIn variable to false and click the button again (I know that the code to click the button is not cross browser compatible right now, this is just a proof of concept so that piece of it will need to be fixed). Since IsFadedIn is set to false, this time the FadeOut method does not return a false and so the UpdatePanel performs the postback.

I've got an event handler attached to the pageLoaded Event so that I can fade the new content in once it is done loading.

The good: I can now finish my animations before loading the new content.

The bad: I have to wait for the animation to finish before starting the postback process, so users actually have to wait a little longer.

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