如何通過JQuery在CSS3完成動畫後執行任務

在上次通過CSS3實現路徑動畫後，多了一個需求。我需要在CSS3動畫執行完成以後，將相關的element從html中移除。

關鍵：首先將animation和element的css設定給拆開：

/* 蜻蜓 */
.df {
	width: 120px;
	height: 120px;
	background: url('images/df-sprite-120.png');
}

.df-animation {
	animation: fly 0.2s steps(4) infinite;
}

/* x軸元素 */
.df-x {
    will-change: transform;
    position: absolute;
 }

.df-xAxis-animation {
	animation: xAxis 8s cubic-bezier(0.02, 0.01, 0.21, 1);
}

/* y軸元素 */
.df-y {
  content: '';
  display: block;
  will-change: transform;
  left: 100px;
  
}

.df-yAxis-animation {
	animation: yAxis 8s cubic-bezier(0.3, 0.27, 0.07, 1.64);
}

/* 蜻蜓 */

.df {

width: 120px;

height: 120px;

background: url('images/df-sprite-120.png');

}

.df-animation {

animation: fly 0.2s steps(4) infinite;

}

/* x軸元素 */

.df-x {

will-change: transform;

position: absolute;

}

.df-xAxis-animation {

animation: xAxis 8s cubic-bezier(0.02, 0.01, 0.21, 1);

}

/* y軸元素 */

.df-y {

content: '';

display: block;

will-change: transform;

left: 100px;

}

.df-yAxis-animation {

animation: yAxis 8s cubic-bezier(0.3, 0.27, 0.07, 1.64);

}

然後通過JQuery在網頁加載之後，將動畫的class給加上去。

$(document).ready(function(){
    var dfX = $('.df-x');
    var dfY = $('.df-y');
    var df = $('.df');

    // mobileCall();
    dfX.addClass('df-xAxis-animation');
    dfY.addClass('df-yAxis-animation');
    df.addClass('df-animation');

    dfX.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
      dfX.remove();
      dfY.remove();
      df.remove();
    });

});

$(document).ready(function(){

var dfX = $('.df-x');

var dfY = $('.df-y');

var df = $('.df');

// mobileCall();

dfX.addClass('df-xAxis-animation');

dfY.addClass('df-yAxis-animation');

df.addClass('df-animation');

dfX.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {

dfX.remove();

dfY.remove();

df.remove();

});

其中dfX.one的部分，通過JQuery.one()方法，添加在動畫完成後的callback function。

分享此文：

相關

發表迴響 取消回覆

發表迴響取消回覆