요소를 희미하게하고 (불투명도를 0으로 전환) 완료되면 요소를 DOM에서 제거하십시오.
jQuery에서는 애니메이션이 완료된 후 발생하는 "제거"를 지정할 수 있으므로 간단합니다. 그러나 CSS3 전환을 사용하여 애니메이션을 적용하려면 전환 / 애니메이션이 언제 완료되었는지 알 수 있습니까?
답변:
전환의 경우 다음을 사용하여 jQuery를 통한 전환의 끝을 감지 할 수 있습니다.
$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });모질라는 훌륭한 참고 자료를 가지고 있습니다 :
애니메이션의 경우 매우 비슷합니다.
$("#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(); });
});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 와 같은 애니메이션 라이브러리를 강력히 제안 합니다.
e.stopImmediatePropagation(); self.trigger(this.whichAnimationEvent()); //for purge existing event callback.apply(self);
허용 된 답변은 현재 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);
});