jQuery를 사용하여 CSS3 이행의 종료를 기다리는 방법

jQuery를 사용하여 CSS3 이행의 종료를 기다리는 방법

요소를 페이드 아웃하고(불투명도를 0으로 전환) 완료되면 요소를 DOM에서 제거합니다.

jQuery에서는 애니메이션이 완료된 후 "제거"를 지정할 수 있으므로 이 작업은 간단합니다.하지만 CSS3 트랜지션을 사용하여 애니메이션을 작성하려면 트랜지션/애니메이션이 언제 완료되었는지 알 수 있는 방법이 있습니까?

전환의 경우 다음을 사용하여 jQuery를 통해 전환의 끝을 감지할 수 있습니다.

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

Mozilla는 다음과 같은 뛰어난 레퍼런스를 가지고 있습니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

애니메이션의 경우도 매우 유사합니다.

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

브라우저 프리픽스이벤트 문자열을 모두 bind() 메서드에 동시에 전달하여 이를 지원하는 모든 브라우저에서 이벤트 발생을 지원할 수 있습니다.

업데이트:

Duck이 남긴 댓글에 따르면 jQuery의.one()메서드를 사용하여 핸들러가 1회만 기동하도록 합니다.예를 들어 다음과 같습니다.

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

업데이트 2:

j쿼리bind()메서드는 폐지되었습니다.on()현재로서는 방법이 바람직하다jQuery 1.7를 클릭합니다.

를 사용할 수도 있습니다.off()콜백 함수의 메서드를 사용하여 콜백이 한 번만 실행되도록 합니다.다음 예시는 다음 예시와 같습니다.one()방법:

$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
 function(e){
    // do something here
    $(this).off(e);
 });

참고 자료:

• .off()

• .one()

이 있습니다.animationend관찰할 수 있는 이벤트는 css에 대한 문서도 참조하십시오.transition사용할 수 있는 애니메이션transitionend이벤트

추가 라이브러리는 필요 없습니다.모두 vanilla JS로 동작합니다.

document.getElementById("myDIV").addEventListener("transitionend", myEndFunction);
function myEndFunction() {
	this.innerHTML = "transition event ended";
}

#myDIV {transition: top 2s; position: relative; top: 0;}
div {background: #ede;cursor: pointer;padding: 20px;}

<div id="myDIV" onclick="this.style.top = '55px';">Click me to start animation.</div>

다른 옵션은 jQuery Transit Framework를 사용하여 CSS3의 이행을 처리하는 것입니다.이행/효과는 모바일 디바이스에서 잘 수행되며 애니메이션 효과를 내기 위해 CSS 파일에 CSS3 이행의 한 줄도 추가할 필요가 없습니다.

다음은 요소를 클릭하면 불투명도가 0으로 전환되고 전환이 완료되면 제거되는 예입니다.

$("#element").click( function () {
    $('#element').transition({ opacity: 0 }, function () { $(this).remove(); });
});

JS 바이올린 데모

이것이 편리할 것 같은 사람들을 위해, CSS 클래스를 통해 CSS 애니메이션을 적용한 후 이후 콜백을 얻기 위해 성공한 jQuery 의존 함수를 소개합니다.Backbone.js 앱에서 사용하고 있기 때문에 완벽하게 동작하지 않을 수도 있지만 도움이 될 수도 있습니다.

var cssAnimate = function(cssClass, callback) {
    var self = this;

    // Checks if correct animation has ended
    var setAnimationListener = function() {
        self.one(
            "webkitAnimationEnd oanimationend msAnimationEnd animationend",
            function(e) {
                if(
                    e.originalEvent.animationName == cssClass &&
                    e.target === e.currentTarget
                ) {
                    callback();
                } else {
                    setAnimationListener();
                }
            }
        );
    }

    self.addClass(cssClass);
    setAnimationListener();
}

이렇게 썼는데

cssAnimate.call($("#something"), "fadeIn", function() {
    console.log("Animation is complete");
    // Remove animation class name?
});

http://mikefowler.me/2013/11/18/page-transitions-in-backbone/의 오리지널 아이디어

이것은 편리할 것 같습니다.http://api.jqueryui.com/addClass/

---

갱신하다

위의 코드와 다른 옵션에 어려움을 겪고 난 후, CSS 애니메이션의 종료를 들을 때는 매우 주의할 것을 제안합니다.애니메이션이 여러 개 진행 중이기 때문에 이벤트 청취에 매우 빠르게 문제가 발생할 수 있습니다.작은 애니메이션이라도 GSAP 같은 애니메이션 라이브러리를 적극 추천합니다.

현재 승인된 답변은 Chrome 애니메이션에 대해 두 번 실행됩니다.일 것이다.webkitAnimationEnd만 아니라animationEnd1번으로 하다

/* From Modernizr */
function whichTransitionEvent(){

    var el = document.createElement('fakeelement');
    var transitions = {
        'animation':'animationend',
        'OAnimation':'oAnimationEnd',
        'MSAnimation':'MSAnimationEnd',
        'WebkitAnimation':'webkitAnimationEnd'
    };

    for(var t in transitions){
        if( transitions.hasOwnProperty(t) && el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

$("#elementToListenTo")
    .on(whichTransitionEvent(),
        function(e){
            console.log('Transition complete!  This is the callback!');
            $(this).off(e);
        });

약속과 연계 가능한 단방향 이벤트

JQuery와 one()하다는 것을 알게 되었다.

function awaitTransitionEnd(transitionProperty, el, triggerFunction) {
    return new Promise((resolve, reject) => {
        const handler = (e) => {
            if (e.propertyName !== transitionProperty) {
                return;
            }
            el.removeEventListener('transitionend', handler);
            resolve(e);
        }
        el.addEventListener('transitionend', handler);
        triggerFunction(el);
    });
}

다음으로 다음 예시와 같이 CSS 트랜지션을 체인으로 할 수 있습니다.

awaitTransitionEnd(
    'background-color', myEl, () => myEl.classList.replace('bg-red', 'bg-green')
).then(() => awaitTransitionEnd(
    'opacity', myEl, () => myEl.classList.add('opacity-0')
)).then(() => awaitTransitionEnd(
    'opacity', myEl, () => myEl.classList.remove('opacity-0')
));

화살표 기능을 사용하지 않으려면 다음과 같이 이벤트 + 요소를 전달해야 합니다.

awaitTransitionEnd('background-color', myEl, function(el) {
    el.classList.replace('bg-red', 'bg-green');
}).then(function(e) {
    return awaitTransitionEnd('opacity', e.target, function(el) {
        el.classList.add('opacity-0');
    });  
}).then(function(e) {
    return awaitTransitionEnd('opacity', e.target, function(el) {
        el.classList.remove('opacity-0');
    });
});

awaitTransitionEnd기능을 .thisthen()- closure - :

//[...]
.then(function(e) {
    return this.awaitTransitionEnd('opacity', e.target, function(el) {
        el.classList.add('opacity-0');
    });  
}.bind(this)).then(//[...]

언급URL : https://stackoverflow.com/questions/9255279/how-to-use-jquery-to-wait-for-the-end-of-css3-transitions