mootools Fxを使ってdivのズームを変更する

Question

divのズームスタイルをアニメーション化したい場合があります。読みやすさは問題ではありません。これは、要素を表示するためです。今はFxでアニメーション化されている他のすべてのスタイル・アスペクトを得ることができますが、これをズームのために使用することはできません。

これはクロムになっています（ただし、明らかに私はブラウザにもそれに気付かないでください）。

Chrome開発ツールの[要素]タブを使用すると、手動でhtml要素のズームスタイルを設定でき、それに応じて動作するので、コードを変更する必要があることがわかっていました。 zoom css/javascript 私はコードでズームイン、ズームアウトする要素を取得することができます：この質問に答えを使用して

dialog.setStyle('WebkitTransform', 'scale(0.1)') 

は今、私はこれを行うには、「ネイティブ」機能を書くことができ、その後私はアウトに負けるだろうFxのすべての素晴らしいアニメーションオプション。誰もFxでこれを達成するためのエレガントな方法を提案できますか？

Answer 1

はい、FXを動作させるには、mootoolsコアのCSSパーサーのいくつかをハックする必要があります。

もう一度もう一度SO問題を調べてみてください。http://jsfiddle.net/dimitar/ZwMUH/ - 2つのアイコンをクリックすると、それらを入れ替えると縮尺で切り替わります。

か、私もそれを使用していることを書いたこのライトボックス基本クラス：http://jsfiddle.net/dimitar/6creP/

その基本で、パーサを改造することによって開始します。また、

Element.Styles.MozTransform = "rotate(@deg) scale(@)"; 
Element.Styles.MsTransform = "rotate(@deg) scale(@)"; 
Element.Styles.OTransform = "rotate(@deg) scale(@)"; 
Element.Styles.WebkitTransform = "rotate(@deg) scale(@)"; 

Object.append(Fx.CSS.Parsers, { 

    TransformScale: { 
     parse: function(value) { 
      return ((value = value.match(/^scale\((([0-9]*\.)?[0-9]+)\)$/i))) ? parseFloat(value[1]) : false; 
     }, 
     compute: function(from, to, delta) { 
      return Fx.compute(from, to, delta); 
     }, 
     serve: function(value) { 
      return 'scale(' + value + ')'; 
     } 
    } 

}); 

関連する、すべてのスタイルの公開とスクリプトVERSを定義します

transforms: { 
    computed: ['transformProperty', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform'], 
    raw: ['transform', '-webkit-transform', '-moz-transform', '-o-transform', 'msTransform'] 
}; 

上記で定義した変換をループして、その要素がサポートする検出方法を返す検出方法利用できない場合のフォールバックとして、将来、または不透明で作業するための決定的なプロパティとして：this.scaleTransformがされるのに対し、

 var testEl = new Element("div"), 
      self = this; 
     this.scaleTransform = this.options.transforms.computed.some(function(el, index) { 
      var test = el in testEl.style; 
      if (test) { 
       self.prop = self.options.transforms.raw[index]; 
      } 

      return test; 
     }); 

     if (!this.prop) { 
      this.prop = "opacity"; 
     } 

そしてthis.propはモーフィングトゥイーン/のためのフォールバックとして正しいブラウザプロパティ、ベンダー接頭辞または不透明度を指しますブール値は、スケールする能力を指しています。それで、それをチェックして、モーフオブジェクトの作成時にサポートされているかどうかを確認できます。

オブジェクト自体は次のように次のようになります。そのもネイティブであることを行ってhttps://github.com/tbela99/Fx.css

：

var morphObj = {}; 
morphObj[this.prop] = ["scale(0)", "scale(1)"]; // call it dynamically 
el.morph(morphObj); 

他のソリューションは、このようなこのプラグインhttp://mootools.net/forge/p/fx_tween_css3として使用できますが、私の知っているTheiryベラずつもありますmootools 2.0で利用可能です

楽しいです。