jquery 和 CSS3 过渡答案

【问题标题】：jquery and CSS3 transitionsjquery 和 CSS3 过渡
【发布时间】：2012-10-06 11:54:16
【问题描述】：

我编写了一个脚本，它使用大量用户选项来设置动画时间、属性等，但似乎无法弄清楚如何添加 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 规则更新器功能，我想我会需要它：

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 类来实现这一点，但需要将用户选项（如代码的第一个 sn-p 中的变量所示）插入 CSS3 转换（这就是我开始构建 CSS 规则更新功能），但现在我卡住了。任何帮助都会很棒！谢谢大家:)

【问题讨论】：

标签： javascript jquery css transitions

【解决方案1】：

这应该可行。您还可以为单个属性设置动画，而不是 all，例如 transition: color 0.25s ease-in-out (transition: property time easing;)

.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');

  }

【讨论】：

【解决方案2】：

jquery-animate-enhanced 使用 jquery 和功能检测对 css3 的支持并在可用时使用它：

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

【讨论】：