여러 브라우저에서 CSS 전환 완료를 안정적으로 감지하려면 어떻게 해야 합니까?

이벤트 기반 CSS 전환: 전환 완료 감지

CSS 전환 작업을 할 때 전환이 완료되면 알림을 받는 것이 바람직한 경우가 많습니다. 완전한. 다행스럽게도 최신 브라우저는 전환이 종료될 때 트리거되는 이벤트를 제공하여 콜백 기능 구현을 용이하게 합니다.

브라우저 간 이벤트 이름

전환 완료에 대한 구체적인 이벤트 이름은 브라우저마다 다릅니다. 브라우저:

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

이벤트 처리 구현

콜백을 구현하려면 CSS 전환이 완료되면 다음 단계를 따르세요.

1. 사용된 브라우저에 적합한 전환 이벤트 이름을 결정합니다.
2. 전환이 진행 중인 요소에 이벤트 리스너를 추가합니다.

elemToAnimate.addEventListener(transitionEndEventName, transitionEnded);

3. 전환 시 원하는 작업을 수행하도록 TransitionEnded 콜백 함수를 정의합니다. 완료됩니다.

그러나 webkitTransitionEnd 이벤트가 항상 일관되게 실행되는 것은 아니라는 점에 유의하는 것이 중요합니다. 이를 고려하여 예상대로 트리거되지 않는 경우 이벤트 핸들러를 호출하도록 시간 제한을 설정하는 것이 좋습니다.

Fallback Timeout

setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, requiredTimeForAnimation);

시간 초과 폴백을 사용하면 전환 이벤트가 발생하지 않더라도 콜백이 실행되도록 할 수 있습니다. fire.

전환 이벤트 이름 가져오기

"브라우저 전반에 걸쳐 CSS3 전환 기능을 어떻게 정규화합니까?"라는 질문에 대한 답변에 설명된 방법입니다. 현재 브라우저에서 지원하는 전환 이벤트 이름을 결정하는 데 사용할 수 있습니다.

추가 리소스

• CSS3을 사용한 전환 처리
• CSS3 전환 이벤트

위 내용은 여러 브라우저에서 CSS 전환 완료를 안정적으로 감지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!