[javascript] CSS3 전환이 완료되면 콜백

요소를 희미하게하고 (불투명도를 0으로 전환) 완료되면 요소를 DOM에서 제거하십시오.

jQuery에서는 애니메이션이 완료된 후 발생하는 “제거”를 지정할 수 있으므로 간단합니다. 그러나 CSS3 전환을 사용하여 애니메이션을 적용하려면 전환 / 애니메이션이 언제 완료되었는지 알 수 있습니까?

답변

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

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

모질라는 훌륭한 참고 자료를 가지고 있습니다 :

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()메소드를 사용하여 핸들러가 한 번만 실행되도록하십시오. 예를 들면 다음과 같습니다.

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

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

업데이트 2 :

jQuery bind()메소드는 더 이상 사용되지 않으며 현재로서는 on()method가 선호됩니다 jQuery 1.7.bind()

off()콜백 함수에서 메소드를 사용 하여 한 번만 실행되도록 할 수도 있습니다. 다음은 one()method 사용과 동등한 예입니다 .

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

참고 문헌 :

답변

또 다른 옵션은 jQuery Transit Framework 를 사용하여 CSS3 전환을 처리하는 것입니다. 전환 / 효과는 모바일 장치에서 잘 작동하며 애니메이션 효과를 수행하기 위해 CSS 파일에 한 줄의 지저분한 CSS3 전환을 추가하지 않아도됩니다.

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

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

JS 피들 데모

답변

animationend관찰 할 수 있는 이벤트가 있습니다. 문서를 참조 하십시오 . 또한 CSS transition애니메이션의 transitionend경우 이벤트를 사용할 수 있습니다

추가 라이브러리가 필요하지 않으며 이들은 모두 바닐라 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>

스 니펫 확장

답변

이 기능이 유용한 사람이라면 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뿐만 아니라 인식하기 때문 animationEnd입니다. 다음은 한 번만 발생합니다.

/* 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);
        });