javascript - 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 规则更新程序函数，我想我会需要它:

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

  }