將多個類組合成多個動畫

我想要創建的情況如下： - 有一個css文件，其中包含幾個（可以說10個）動畫，就像fadein，fadeout，roll-left，roll-right等一樣。 - 使用class ='fadein roll-left'創建div元素我希望此元素淡入淡出並向左滾動。將多個類組合成多個動畫

我希望在不創建.fadein.roll-left類的情況下完成這個工作，因爲當我有10個動畫時，我需要使（類似於？）10^10個類能夠獲得所有變體？

這裏是爲了更好的解釋codepen：http://codepen.io/Sormano/pen/Bbphs

總之我的問題是：有什麼辦法可以「合併」多個動畫名稱：...;而不是覆蓋另一個。

希望我的問題很明確，謝謝。

來源

2014-03-29 Sormano

我相信要解決這個問題的唯一方法就是解析你的CSS文件，根據它的類提取一個元素的所有可用動畫，然後動態合併它們。 –

實現此目的的唯一方法是創建一個內部div，併爲孩子設置第二個動畫 – vals

雖然我不是100％滿意，但這確實能完成這項工作。

我現在正在使用一點點的jQuery。

jQuery(document).ready(function($) { 

    $('.btn').css('animation-name', function(index, value) { 
     return $(this).attr('class').replace(/ /g, ','); 
    }); 
    $('.btn').css('-webkit-animation-name', function(index, value) { 
     return $(this).attr('class').replace(/ /g, ','); 
    }); 

});`

來源

2014-04-19 20:29:16 Sormano

將多個類組合成多個動畫

回答

相關問題