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 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 ルールの更新機能) が、現在行き詰まっています。どんな助けでも素晴らしいでしょう！みんなありがとう ：）

4

2 に答える 2

1

これはうまくいくはずです。の代わりに個々のプロパティをアニメーション化することもできますall( transition: color 0.25s ease-in-outtransition: 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 は css3 の jquery と feature-detect のサポートを使用し、利用可能な場合はそれを使用します。

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