โทรกลับเมื่อการเปลี่ยนแปลง 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(){ ... });

โปรดทราบว่าคุณสามารถส่งผ่านสตริงเหตุการณ์ทั้งหมดนำหน้าเบราว์เซอร์ไปยังวิธีการผูก () พร้อมกันเพื่อสนับสนุนการยิงเหตุการณ์ในเบราว์เซอร์ทั้งหมดที่สนับสนุน

ปรับปรุง:

ตามข้อคิดเห็นโดย Duck: คุณใช้.one()วิธีการของ jQuery เพื่อให้แน่ใจว่า handler ยิงเพียงครั้งเดียว ตัวอย่างเช่น:

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

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

อัปเดต 2:

jQuery bind()วิธีการได้รับการคัดค้านและวิธีการที่เป็นที่ต้องการของon()jQuery 1.7bind()

นอกจากนี้คุณยังสามารถใช้off()วิธีการในฟังก์ชั่นการโทรกลับเพื่อให้แน่ใจว่ามันจะถูกยิงเพียงครั้งเดียว นี่คือตัวอย่างที่เทียบเท่ากับการใช้one()วิธีการ:

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

อ้างอิง:

• .off()

• .one()

อีกตัวเลือกหนึ่งคือใช้jQuery Transit Frameworkเพื่อจัดการการเปลี่ยน CSS3 ของคุณ การเปลี่ยน / เอฟเฟกต์ทำงานได้ดีบนอุปกรณ์มือถือและคุณไม่ต้องเพิ่มการเปลี่ยน CSS3 ยุ่ง ๆ ในไฟล์ CSS ของคุณเพื่อที่จะทำเอฟเฟกต์ภาพเคลื่อนไหว

นี่คือตัวอย่างที่จะเปลี่ยนความทึบขององค์ประกอบเป็น 0 เมื่อคุณคลิกที่มันและจะถูกลบออกเมื่อการเปลี่ยนแปลงเสร็จสมบูรณ์:

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

การสาธิต JS Fiddle

มีanimationendเหตุการณ์ที่สามารถสังเกตเห็นได้ในเอกสารที่นี่รวมถึงtransitionภาพเคลื่อนไหวcss ที่คุณสามารถใช้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 ขึ้นอยู่กับฟังก์ชั่นที่ฉันประสบความสำเร็จกับการใช้ภาพเคลื่อนไหว CSS ผ่านชั้นเรียน CSS แล้วได้รับการโทรกลับหลังจากนั้น มันอาจไม่ทำงานอย่างสมบูรณ์เพราะฉันใช้มันในแอป 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);
        });