by 在上次通過CSS3實現路徑動畫後，多了一個需求。我需要在CSS3動畫執行完成以後，將相關的element從html中移除。
關鍵：首先將animation和element的css設定給拆開：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
/* 蜻蜓 */ .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給加上去。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(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。
好的董哥