UpdatePanels 애니메이션

Question

Ajax Control Toolkit의 일부인 UpdatePanelAnimationExtender를 사용해 보았습니다.하지만 가장 큰 불만은 애니메이션이 새 콘텐츠로로드되기 전에 완료 될 때까지 기다리지 않는다는 것입니다.

1. 시작 비동기 서버에 요청
2. 페이드 UpdatePanel 완전히
3. 의 내용 밖으로 UpdatePanel이 완전히 페이드 아웃되면 새로운 내용 :

   나는 다음과 같은 일을하고 싶습니다 UpdatePanel에

4. 페이드 새로운 콘텐츠, 부하를 반환

내가 넣을 수 있습니다 그 나는 또한 더 이상 처리를 취소합니다 다음과 같은 자바 스크립트를 가질 수로

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

: 포스트 백을 시작하는 트리거에 다음 코드

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

내 문제는 내가 알아낼 수 없습니다입니다 페이드 애니메이션이 끝나면 로딩을 재개하는 법을 배웁니다. 어떤 도움을 주시면 감사하겠습니다.

Answer 1

나는 해결책을 찾았다 고 생각합니다. 당신이 더 나은 해결책을 가지고 있다면 자유롭게 체임 할 수 있습니다.

OnClientClick="return FadeOut();" 

현재 내용에 가시 퇴색되는 경우는 false를 돌려 아래로 내 페이드 아웃 메소드를 호출 : 내 버튼에서

나는 다음과 같은 OnClientClick 이벤트 핸들러를 배치했다. 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; 
    } 
}