Smooth.js-$ .animateにダウングレードしたCSS3トランジション用のjQueryプラグイン

CSS3トランジションは非常に便利です。 JavaScriptアニメーションと比較すると、次のとおりです。

1. よりスムーズな移行を提供します。
2. より少ないリソースを消費します。
3. 新しい機会を切り開きます。 たとえば、マトリックス変換（CSS変換）の自動処理。

もちろん、私たちの愛するIEはバージョン9でもそれらをサポートしていません。



IEの場合、たとえば、$ .animateを使用して、従来の方法でアニメーションを実行することは論理的です。 そのような場合にSmooth.jsプラグインを使用することをお勧めします。

構文

構文は非常にシンプルで、jQuery.animateに可能な限り近いものです。

$("#subject).smooth({ width: "40px", transform: "rotate(-45deg)", background: "#cbf" }, { duration: 2000, easing: "swing" });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初のパラメーターはアニメーションのプロパティのリストであり、2番目はアニメーション設定です。 これまでの設定では、期間（ms単位の期間）とイージング（スムージング機能の名前）のみです。

シーケンシャルアニメーション

この関数は$ .Deferred（）オブジェクトを返すため、いくつかのアニメーションを順番に簡単に実行できます。

 $("#subject).smooth({ width: "40px" }).done(function() { $("#subject).smooth({ transform: "rotate(-45deg)", ));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

動作モード

プラグインは、「css」と「jquery」の2つのモードのいずれかで動作します。初期化時に、モードをcssに設定しようとします。つまり、「jquery」を使用する場合。

  $.fn.smooth.configure({ mode: "jquery" });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おわりに

乗換案内についてはこちらをご覧ください。

プラグインのフィードバックに感謝します。