애니메이션 익스텐더 문제

Question

방금 ​​AnimationExtender으로 작업하기 시작했습니다. 나는 단추를 누를 때 데이터베이스에서 수집 된 목록으로 새 div를 표시하는 데 사용하고 있습니다. 문제는 단추가 필요하지 않으면 데이터베이스를 호출하고 싶지 않기 때문에이 목록을 가져 오려면 다시 게시해야한다는 것입니다. 포스트 백은 애니메이션 중간 흐름을 중지하고 다시 설정합니다. 버튼은 업데이트 패널 내에 있습니다.

이상적으로는 포스트 백이 완료되고 목록이 수집되면 애니메이션을 시작하는 것이 좋습니다. 나는 ScriptManager을 사용하여 포스트 백이 완료되고 약간의 진전이 있었는지를 조사했다. 페이지에 두 개의 자바 스크립트 메서드를 추가했습니다.

function linkPostback() { 

     var prm = Sys.WebForms.PageRequestManager.getInstance(); 
     prm.add_endRequest(playAnimation) 
    } 

    function playAnimation() { 
     var onclkBehavior = $find("ctl00_btnOpenList").get_OnClickBehavior().get_animation(); 
     onclkBehavior.play(); 
    } 

그리고 나는 btnOpenList.OnClientClick=”linkPostback();”

이 변경되었습니다 거의 문제를 해결한다. 나는 아직도 약간의 애니메이션 더듬 거리다. 애니메이션은 포스트 백 이전에 재생을 시작한 다음 포스트 백 이후에 제대로 재생됩니다. onclkBehavior.pause()을 사용하면 아무 효과가 없습니다. AnimationExtender.Enabled = false을 설정하고 단추 다시 게시 이벤트에서이 값을 true로 설정하여이 문제를 해결할 수 있습니다. 그러나 AnimationExtender가 다시 활성화되어 있으므로 한 번만 작동합니다. 나는 또한 자바 스크립트를 통해 AnimationExtender을 사용하지 못하도록 시도했다. 그러나 이것은 아무런 효과가 없다.

자바 스크립트 호출을 통해서만 애니메이션을 재생할 수 있나요? 애니메이션이 실행될 때 제어 할 수 있도록 버튼 클릭 이벤트에 대한 자동 링크를 분리해야합니다.

희망이 있습니다.

감사

DG가

Answer 1

당신이보고있는 흐름이 같은 것입니다 : 버튼을

1. 클릭
2. AnimationExtender 조치를 잡아 clickOn 콜백 전화
3. linkPostback는 비동기 요청을 시작합니다 페이지에 대해 호출 한 다음 AnimationExtender에 흐름을 반환합니다.
4. 애니메이션
5. pageRequest 반환을 시작하고 애니메이션 나는이 문제를 해결 적어도 두 가지 방법이 있다고 생각을 다시

을 시작 playAnimation를 호출합니다. 거의 모든 자바 스크립트가 필요한 것 같습니다. 클릭만으로 애니메이션을 시작하는 AnimationExtender를 해결하면됩니다.

옵션 1 : AnimationExtender 버튼을 숨기고 애니메이션을 재생하는 새 버튼을 추가하십시오. AE 버튼의 스타일을 "display : none;"으로 설정하는 것만 큼 간단해야합니다. 및 자신의 단추 호출 linkPostback().

옵션 2 : 애니메이션이 끝나면 Animation Extender를 다시 비활성화하십시오. 이것은 아마 인만큼 playAnimation 호출이 차단 될 때 작동한다 : AS를

function linkPostback() { 

    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_endRequest(playAnimation) 
} 

function playAnimation() { 

    AnimationExtender.Enabled = true; 
    var onclkBehavior = $find("ctl00_btnOpenList").get_OnClickBehavior().get_animation(); 
    onclkBehavior.play(); 
    AnimationExtender.Enabled = false; 
} 

를 제외하고, 그것은 pageRequest를 수신 지연이있는 경우 문제를 직면 할 수있는 귀하의 일반적인 접근 방식을 보인다. 버튼을 클릭하면 조금 이상 할 수도 있습니다. 몇 초 후 애니메이션이 실행됩니다.데이터를 미리로드하거나 div에 미리 "Loading ..."항목을 미리 채우고 적절한 크기로 만들면 실제 내용이 도착할 때마다 채울 수 있습니다.

다른 단추를 추가하고 숨길 다음과 같이 최종 솔루션을 제공 해답의 도움으로

Answer 2

이었다.

<input id="btnHdn" runat="server" type="button" value="button" style="display:none;" /> 

AnimationExtender를 숨겨진 버튼으로 지정하면 원하지 않는 click 이벤트가 발생하지 않습니다.

<cc1:AnimationExtender ID="aniExt" runat="server" TargetControlID="btnHdn"> 

자바 스크립트를 포스트 백이 완료된 후 애니메이션을 트리거 할 버튼에 연결합니다.

<asp:ImageButton ID="btnShowList" runat="server" OnClick="btnShowList_Click" OnClientClick="linkPostback();" /> 

페이지에 필요한 자바 스크립트를 추가하십시오.

function linkPostback() { 
     var prm = Sys.WebForms.PageRequestManager.getInstance(); 
     prm.add_endRequest(playOpenAnimation) 
} 

function playOpenAnimation() { 
    var onclkBehavior = ind("ctl00_aniExt").get_OnClickBehavior().get_animation(); 
    onclkBehavior.play();   

    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.remove_endRequest(playOpenAnimation) 
}