CSS 전환이 여러 브라우저에서 완료되면 어떻게 알림을 받을 수 있나요?

CSS 전환 완료 알림

CSS 전환이 완료되면 전환 후 작업을 시작하라는 알림을 받는 것이 중요합니다. 다행스럽게도 브라우저는 전환 완료 시 트리거되는 이벤트를 제공하여 개발자가 콜백 기능을 등록할 수 있도록 합니다.

브라우저별 이벤트 이름

그러나 브라우저는 브라우저별 이벤트 이름을 사용합니다.

• 웹킷 브라우저(Chrome, Safari): webkitTransitionEnd
• Firefox: Transitionend
• IE9 : msTransitionEnd
• Opera: oTransitionEnd

webkitTransitionEnd 함정

webkitTransitionEnd가 항상 실행되지는 않을 수도 있습니다. 특히 애니메이션 효과가 없을 때 더욱 그렇습니다. 요소에 눈에 띄는 영향을 미칩니다. 이를 완화하려면 이벤트 핸들러가 예상대로 트리거되지 않는 경우 제한 시간을 적용하여 이벤트 핸들러를 실행하십시오.

코드 예

다음 코드는 이 이벤트의 사용법을 보여줍니다.

var transitionEndEventName = "XXX"; //figure out, e.g. "webkitTransitionEnd".. 
var elemToAnimate = ... //the thing you want to animate..
var done = false;
var transitionEnded = function(){
     done = true;
     //do your transition finished stuff..
     elemToAnimate.removeEventListener(transitionEndEventName,
                                        transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName,
                                transitionEnded, false);

//animation triggering code here..

//ensure tidy up if event doesn't fire..
setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, XXX); //note: XXX should be the time required for the
        //animation to complete plus a grace period (e.g. 10ms) 

브라우저 호환성 참고

특정 브라우저에 적합한 전환 이벤트 이름을 결정하려면 "어떻게 해야 합니까?"에 강조 표시된 방법을 활용하십시오. 브라우저 전반에 걸쳐 CSS3 전환 기능을 정규화하시겠습니까?".

위 내용은 CSS 전환이 여러 브라우저에서 완료되면 어떻게 알림을 받을 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!