Gọi lại khi quá trình chuyển đổi CSS3 kết thúc

Tôi muốn làm mờ dần một phần tử (chuyển độ mờ của nó thành 0) và sau đó khi hoàn thành loại bỏ phần tử khỏi DOM.

Trong jQuery, điều này rất đơn giản vì bạn có thể chỉ định "Xóa" sẽ xảy ra sau khi hoạt ảnh hoàn thành. Nhưng nếu tôi muốn làm động bằng cách sử dụng các chuyển tiếp CSS3 thì có biết khi nào quá trình chuyển đổi / hoạt hình đã hoàn thành không?

Để chuyển đổi, bạn có thể sử dụng cách sau để phát hiện kết thúc chuyển đổi qua jQuery:

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

Mozilla có một tài liệu tham khảo tuyệt vời:

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

Đối với hình ảnh động, nó rất giống nhau:

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

Lưu ý rằng bạn có thể chuyển đồng thời tất cả các chuỗi sự kiện có tiền tố trình duyệt vào phương thức bind () để hỗ trợ sự kiện bắn vào tất cả các trình duyệt hỗ trợ nó.

Cập nhật:

Theo nhận xét mà Duck để lại: bạn sử dụng .one()phương thức của jQuery để đảm bảo trình xử lý chỉ kích hoạt một lần. Ví dụ:

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

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

Cập nhật 2:

bind()Phương thức jQuery không được dùng nữa và on()phương thức này được ưa thích hơn jQuery 1.7.bind()

Bạn cũng có thể sử dụng off()phương thức trên chức năng gọi lại để đảm bảo nó sẽ chỉ được kích hoạt một lần. Đây là một ví dụ tương đương với việc sử dụng one()phương thức:

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

Người giới thiệu:

• .off()

• .one()

Một tùy chọn khác là sử dụng Khung chuyển tiếp jQuery để xử lý các chuyển tiếp CSS3 của bạn. Các hiệu ứng / hiệu ứng chuyển tiếp hoạt động tốt trên các thiết bị di động và bạn không phải thêm một dòng chuyển tiếp CSS3 lộn xộn trong tệp CSS của mình để thực hiện các hiệu ứng hoạt hình.

Dưới đây là một ví dụ sẽ chuyển độ mờ của phần tử thành 0 khi bạn nhấp vào nó và sẽ bị xóa sau khi quá trình chuyển đổi hoàn tất:

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

Demo Fiddle

Có một animationendsự kiện có thể được quan sát xem tài liệu ở đây , cũng cho transitionhoạt hình css bạn có thể sử dụng transitionendsự kiện

Không cần thêm thư viện, tất cả đều hoạt động với 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>

Đối với bất kỳ ai mà điều này có thể hữu ích, đây là một hàm phụ thuộc jQuery mà tôi đã thành công với việc áp dụng hoạt hình CSS thông qua một lớp CSS, sau đó nhận được một cuộc gọi lại từ sau đó. Nó có thể không hoạt động hoàn hảo vì tôi đã sử dụng nó trong Ứng dụng Backbone.js, nhưng có thể hữu ích.

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();
}

Tôi đã sử dụng nó như thế này

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

Ý tưởng ban đầu từ http://mikefowler.me/2013/11/18/page-transitions-in-backbone/

Và điều này có vẻ tiện dụng: http://api.jqueryui.com/addClass/

Cập nhật

Sau khi vật lộn với đoạn mã trên và các tùy chọn khác, tôi sẽ khuyên bạn nên thận trọng với bất kỳ kết thúc nghe hoạt hình CSS nào. Với nhiều hình ảnh động đang diễn ra, điều này có thể trở nên lộn xộn rất nhanh cho việc nghe sự kiện. Tôi thực sự muốn đề xuất một thư viện hoạt hình như GSAP cho mọi hoạt hình, ngay cả những thư viện nhỏ.

Câu trả lời được chấp nhận hiện kích hoạt hai lần cho hình động trong Chrome. Có lẽ điều này là do nó nhận ra webkitAnimationEndcũng như animationEnd. Sau đây chắc chắn sẽ chỉ bắn một lần:

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