Анимация UpdatePanels

Question

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

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

запроса
1. Старта Асинхронных на сервер
2. Fade из содержания в UpdatePanel полностью
3. После UpdatePanel полностью затухать и нового содержания возвращается, нагрузка на новое содержание
4. Fade в 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 отменяет полностью асинхронную обратную передачу, которую вызвал бы UpdatePanel.

После завершения анимации я устанавливаю переменную IsFadedIn в значение false и снова нажимаю кнопку (я знаю, что код для нажатия кнопки не совместим с браузером прямо сейчас, это просто доказательство концепции, так что часть это необходимо будет исправить). Поскольку IsFadedIn установлен в false, на этот раз метод FadeOut не возвращает false, и поэтому UpdatePanel выполняет обратную передачу.

У меня есть обработчик событий, прикрепленный к событию PagesLoaded, чтобы я мог исчезать новый контент, как только он будет загружен.

: Теперь я могу закончить анимацию перед загрузкой нового контента.

Плохой: Мне нужно дождаться окончания анимации до начала процесса обратной передачи, поэтому пользователям на самом деле придется подождать немного дольше.

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