Class: Fx.Morph

複数のCSSプロパティを一度にアニメーションさせることができ、CSSセレクタを使用することもできます。Fxからメソッド、イベント、プロパティ、オプションを継承します。

継承:

構文:

var myFx = new Fx.Morph(element[, options]);

引数:

  1. element - (いろいろ) スタイルをアニメーションさせたい要素のIDか要素そのもの。
  2. options - (オブジェクト, オプション) Fxオプションオブジェクト。

戻り値:

  • (オブジェクト) 新しいFx.Morphインスタンス。

例:

オブジェクトを利用して、複数のスタイルに初期値・終了値を設定: 
var myEffect = new Fx.Morph('myElement', {duration: 'long', transition: Fx.Transitions.Sine.easeOut});

myEffect.start({
    'height': [10, 100], //スタイル'height'が10pxから100pxへ変形。

    'width': [900, 300]  //スタイル'width'が900pxから300pxへ変形。
});
複数のスタイルの初期値を省略し、現在の要素のスタイルを初期値として利用: 
var myEffect = new Fx.Morph('myElement', {duration: 'short', transition: Fx.Transitions.Sine.easeOut});

myEffect.start({
    'height': 100, //現在の高さから100pxまで変形。
    'width': 300   //現在の幅から300pxまで変形。

});
CSSクラスにマッチする要素のCSSプロパティを変更: 
var myEffect = new Fx.Morph('myElement', {duration: 1000, transition: Fx.Transitions.Sine.easeOut});

//myEffectのスタイル変更がターゲット要素にだけ適用されます。
myEffect.start('.myClassName');

参考情報:

Fx.Morphメソッド: set

要素のCSSプロパティを指定した値へ即座に変更します。

構文:

myFx.set(to);

引数:

  1. properties - (いろいろ) 変更したいCSSプロパティのキー=値のペアを持つオブジェクトか、CSSセレクターを指定した文字列。CSSプロパティに対して一つの値しか与えられていなければ、現在の値から与えられた値へと遷移します。

戻り値:

  • (オブジェクト) このFx.Morphインスタンス。

例:

var myFx = new Fx.Morph('myElement').set({

    'height': 200,
    'width': 200,
    'background-color': '#f00',
    'opacity': 0

});
var myFx = new Fx.Morph('myElement').set('.myClass');

Fx.Morphメソッド: start

複数のCSSプロパティを同時にアニメーションさせます。

構文:

myFx.start(properties);

引数:

  1. properties - (いろいろ) 変更させたいCSSプロパティのキー＝値からなるオブジェクトか、CSSセレクタを表す文字列。 もしCSSプロパティの値が一つだけならば、現在の値から与えられた値へとアニメーションします。

戻り値:

  • (オブジェクト) このFx.Morphインスタンス。

例:

var myEffects = new Fx.Morph('myElement', {duration: 1000, transition: Fx.Transitions.Sine.easeOut});

myEffects.start({
    'height': [10, 100],
    'width': [900, 300],
    'opacity': 0,
    'background-color': '#00f'

});

注意点:

  • CSSセレクターとして文字列が与えられた場合、セレクターは一意のものでなくてはなりません。
  • 複数のセレクター(カンマ区切り)はサポートされていません。

Hash: Element.Properties

参考:Element.Properties

Element Property: morph

Set:

要素にデフォルトのFx.Morphインスタンスを設定します。

構文:

el.set('morph'[, options]);

引数:

  1. options - (オブジェクト, オプション) Fx.Morphオプション。

戻り値:

  • (要素) この要素。

例:

el.set('morph', {duration: 'long', transition: 'bounce:out'});
el.morph({height: 100, width: 100});

Get:

要素のデフォルトFx.Morphインスタンスを取得します。

構文:

el.get('morph');

引数:

  1. options - (オブジェクト, オプション) Fx.Morphオプション。これが渡されると、新しいインスタンスが生成されます。

戻り値:

  • (オブジェクト) Fx.Morphインスタンス。

例:

el.set('morph', {duration: 'long', transition: 'bounce:out'});
el.morph({height: 100, width: 100});
el.get('morph'); //Fx.Morphインスタンス。

Native: Element

Elementメソッド: morph

渡されたプロパティを元に、要素をアニメーションさせます。

構文:

myElement.morph(properties);

引数:

  1. properties - (いろいろ) アニメーションさせるCSSプロパティ。CSSプロパティのオブジェクトか、CSSセレクターを表す文字列。CSSプロパティに与えられた値が1つの場合、現在のCSSプロパティ値から、与えられた値へとアニメーションさせます。

戻り値:

  • (要素) この要素。

例:

オブジェクトの場合: 
$('myElement').morph({height: 100, width: 200});
CSSセレクターの場合: 
$('myElement').morph('.class1');

参考情報:

このドキュメントはMooToolsのドキュメントを元に高橋文樹が翻訳（ちょっと改変）しました。
本家と同じく、Attribution-NonCommercial-ShareAlike 3.0ライセンスで公表されています。

トップに戻る