[javascript] 當CSS3轉換完成時回調


1 Answers

另一種選擇是使用jQuery Transit Framework來處理你的CSS3轉換。 轉換/效果在移動設備上表現良好,並且您不必在CSS文件中添加一行混亂的CSS3轉換以執行動畫效果。

下面是一個例子,當你點擊它時將元素的不透明度轉換為0,並且在轉換完成後將被移除:

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

JS小提琴演示

Question

我想淡出一個元素(將其不透明度轉換為0),然後在完成時從DOM中移除該元素。

在jQuery中,這是直截了當的,因為您可以在動畫完成後指定“刪除”。 但是,如果我希望使用CSS3轉換進行動畫製作,無論如何要知道轉換/動畫何時完成?




目前接受的答案在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);
        });



Related