0

我编写了一个脚本，该脚本使用很多用户选项来进行动画计时、属性等，但似乎无法弄清楚如何添加 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 规则更新功能），但现在卡住了。任何帮助都会很棒！多谢你们 ：）

4

2 回答 2

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——</p> 

if(Modernizr.csstransitions){

      $Overlay.addClass('animate');

  }
于 2012-10-06T00:44:24.750 回答
0

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

http://playground.benbarnett.net/jquery-animate-enhanced/
于 2012-10-06T03:54:16.020 回答