jQuery和CSS3过渡

Question

我编写了一个脚本，该脚本使用了许多用户选项来设置动画时间，属性等，并且似乎无法弄清楚如何添加css3动画（这会回退到jquery）

说我有以下代码（仅作为示例）：

$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 Rule updater函数，我想我会需要：

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规则更新功能），但目前卡住了。 任何帮助将是惊人的！ 多谢你们 ：）

Answer 1

这应该工作。 您还可以设置单个属性而不是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');

  }

Answer 2

jquery-animate-enhanced使用jquery和feature-detects支持css3，并在可用时使用它：

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