jQuery和CSS3過渡

我已經寫了使用了大量的用戶選項動畫計時，性能等，並似乎無法弄清楚如何添加CSS3動畫的腳本（這將回退到jQuery的）jQuery和CSS3過渡

說我有下面的代碼（只是一個例子）：

$Element.bind('click',function(){ 
    var bc=options.borderColor, 
     bw=options.borderWidth, 
     l= options.left, 
     speed=options.speed, 
     bc_ease=options.borderColorEasing, 
     bw_ease=options.borderColorWidth, 
     l_ease=options.leftEasing; 


if(Modernizr.csstransitions){ 
    // CSS3 ..... 


}else{ 
    // JS 

    $Overlay.animate({borderColor: bc, borderWidth: bw, left: L }, 
    {duration:speed, queue:false, specialEasing: {borderColor: bc_ease, 
    borderWidth: bw_ease, left: L_ease }}); 

}; 
});

我也建立了一個CSS規則更新功能，我想我會需要：

setCSSRule:function(getRule,newRule){ 
    var styles=document.styleSheets; 
    for(var i=0,l=styles.length; i<l; ++i){ 
     var sheet=styles[i]; 
     if(sheet.title === "style"){ 
      var rules=sheet.cssRules; 
      for(var j=0, l2=rules.length; j<l2; j++){ 
      var rule=rules[j]; 
       // SELECT APPROPRIATE RULE IN STYLESHEET AND UPDATE IT 
       if(getRule === rule.selectorText){ 
            rule.style.cssText=newRule; 
        }; 
      }; 
     }; 
    }; 
},

這只是遍歷所有樣式表，找到正確的規則然後用提供的新規則更新它。

我對CSS3轉換有一個基本的瞭解，但我習慣於在jQuery和JS中進行動畫製作，所以CSS3轉換有點落後於我。從我讀過的，我可以使用addClass或Toggle類來實現這一點，但需要將用戶選項（如代碼的第一部分中的變量所示）插入到CSS3轉換中（這就是爲什麼我打算構建CSS規則更新功能），但現在我暫時停滯不前。任何幫助將是驚人的！謝謝你們:)

來源

2012-10-05 Aaron

這應該工作。您也可以個別動畫屬性而不是all，像transition: color 0.25s ease-in-out（過渡：財產時緩和;）

.overlay { 
    border-color : #333; 
    border-style : solid; 
    border-width : 1px; 
    left : 0; 
    -webkit-transition : all 0.25s ease-in-out; 
     -moz-transition : all 0.25s ease-in-out; 
     -o-transition : all 0.25s ease-in-out; 
      transition : all 0.25s ease-in-out; 

    } 

.overlay.animate { 
    border-color : #000; 
    border-width : 5px; 
    left :100px; 
    }

和jQuery-

if(Modernizr.csstransitions){ 

     $Overlay.addClass('animate'); 

    }

來源

2012-10-06 00:44:24

jQuery的動畫增強使用jQuery和功能檢測支持爲css3和使用，如果可用：

http://playground.benbarnett.net/jquery-animate-enhanced/

來源

2012-10-06 03:54:16

jQuery和CSS3過渡

回答

相關問題