Анимация UpdatePanels

Question

Я пытался использовать UpdatePanelAnimationExtender, который является частью Ajax Control Toolkit, но самая большая претензия, с которой я столкнулся, заключается в том, что он не ждет завершения анимации перед загрузкой нового контента.

Я хотел бы сделать что-то вроде следующего:

1. Запустить асинхронный запрос к серверу
2. Полное исчезновение содержимого в панели обновления
3. Как только UpdatePanel полностью исчезнет и будет возвращено новое содержимое, загрузите новое содержимое
4. Исчезновение в панели обновления

Я могу поставить следующий код на триггер, который запускает обратную передачу:

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, если текущий контент исчез и виден. Возврат ложного полностью отменяет асинхронную обратную передачу, которую вызвала бы 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;
  }
}