CSS 전환 완료를 어떻게 감지할 수 있나요?

CSS 전환에 대한 콜백

질의: CSS 전환이 완료되면 알림을 받을 수 있나요?

답변 : 콜백을 지원하는 브라우저에서는 전환이 완료되면 이벤트가 트리거됩니다. 이벤트는 브라우저에 따라 다릅니다.

• Webkit(Chrome, Safari): webkitTransitionEnd
• Firefox: Transitionend
• IE9: msTransitionEnd
• Opera: oTransitionEnd

WebKit TransitionEnd 문제

webkitTransitionEnd가 항상 실행되지 않을 수도 있다는 점에 유의하세요. 이는 애니메이션이 요소에 시각적 효과를 주지 않을 때 발생합니다. 이 문제를 해결하려면 이벤트가 예상대로 트리거되지 않는 경우 이벤트 핸들러를 실행하는 시간 초과를 고려하십시오.

권장 코드 구조

var transitionEndEventName = "XXX"; // Specify the appropriate event name
var elemToAnimate = ... // Element to be animated
var done = false;
var transitionEnded = function() {
    done = true;
    // Code to execute when transition finishes
    elemToAnimate.removeEventListener(transitionEndEventName, transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName, transitionEnded, false);

// Animation triggering code here

// Fallback for browsers without event notifications
setTimeout(function() {
    if (!done) {
        transitionEnded();
    }
}, XXX); // Calculate XXX based on animation time and grace period

참고 : "브라우저 간 CSS3 전환 기능을 어떻게 정규화하나요?"를 참조하세요. 전환 이벤트 이름을 정규화하기 위한 것입니다.

위 내용은 CSS 전환 완료를 어떻게 감지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!