div 실종을 애니메이션으로 처리하는 방법, 원활하게하는 방법?

Question

나는 Dashboard 위젯의 div 실종을 애니메이션으로 만들려고 노력했지만 잔인하게 "휙휙"간다. (예상대로 사라지는 것처럼, 순간적으로 만).

function removeElement(elementId) 
{ 
duration = 9000; // The length of the animation 
interval = 13; // How often the animation should change 
start = 1.0; // The starting value 
finish = 0.0; // The finishing value 
handler = function(animation, current, start, finish) { 
    // Called every interval; provides a current value between start and finish 
    document.getElementById(elementId).style.opacity = current; 
    }; 
    new AppleAnimator(duration, interval, start, finish, handler).start(); 
interval = 1; 
start= "visible"; 
finish = "hidden"; 
duration = 9001; 
handler = function(animation, current, start, finish) { 
    document.getElementById(elementId).style.visibility="hidden"; 
    }; 
    new AppleAnimator(duration, interval, start, finish, handler).start(); 

} 

나는 불투명도가 0에 도달 한 후 DIV에게 밀리 초 "사라"이 예상하지만, (나)는 그리 명확하지 이유로, 그냥 즉시 사라집니다. 두 번째 애니메이션 코드를 주석 처리하면 div가 페이드 아웃합니다 (그러나 여전히 활성화되어 있으므로 원하지 않습니다).

아직 보지 못한 모든 솔루션은 JQuery를 사용하고 애니메이션이 끝나기를 기다리는데 JQuery 이외의 다른 방법이 있습니까?

Answer 1

나는 그것을 발견 :이 animator.oncomplete 보유 AppleAnimator : 타이머가 완료 될 때 호출 핸들러를. 내 경우

:

var anim = new AppleAnimator(duration, interval, start, finish, handler); 
anim.oncomplete= function(){ 
      document.getElementById(elementId).style.visibility="hidden"; 
          }; 
anim.start(); 

애플 문서는 실제로 "콜백"그것은 처음에 실현하기 어려운 약간 만드는 애니메이션 코드 자체와 "처리기"콜백을 호출합니다. 당신이 순수 자바 스크립트 솔루션을 찾고 있다면 아마 기본적으로 어떻게 자바 스크립트 이벤트 작업과의 좋은 이해를 필요로 D

Answer 2

:

는 는

감사 프렌치 그래도 "YourCallbackFunction는"제가 콜백과 관련된 뭔가를 실종됐다 깨닫게했다 자바 스크립트 언어에 대해. 참조로 당신은 이것을 확인해야합니다 question on CodeReview

하지만 내가 생각하기에 가장 적합한 해결책은 jQuery에 의존하는 것은 CSS3 애니메이션을 체크 아웃하는 것입니다. 모든 브라우저에서 지원되지 않더라도 Modernizer를 사용하여 애니메이션 용 폴리필을 채울 수 있습니다.

내가 좋아하는 CSS3 애니메이션 라이브러리는 Animate.css입니다. 꽤 깔끔하고 페이지에서 다양한 데모를 제공합니다.

먼저 애니메이션을 선택하고 CSS 스타일 시트에 추가해야합니다. 그런 다음 애니메이션에 대한 모든 것을 포함하는 또 다른 맞춤 클래스를 만듭니다.

.disappear{ 
    -webkit-animation-duration: 3s; 
    -webkit-animation-delay: 2s; 
    -webkit-animation-iteration-count: infinite; 
} 

그런 다음 자바 스크립트 이벤트를 사용하여 클래스에서 요소로 토글 할 수 있습니다. 다음은 요소를 클래스에 추가하는 방법입니다.

var animationObject = document.getElementById("poof"); 
animationObject.className = animationObject.className + " disappear"; 

이이 answer을 확인 할 수 방법의 자바 스크립트에 대한 자세한 도움이 필요합니다.

도움이 되길 바랍니다 ...