同じ要素上のトゥイーン

Question

同じ要素に 2 つのトゥイーンを適用すると、トゥイーンになりません。なぜ？それとも私が何か間違ったことをしているのでしょうか？

_input.tween('opacity', 1);
_input.tween('height', '100px');
// nothing happens

しかし、どちらも個別に動作します。

フィドル

Answer 1

Element.prototype.tween の抽象化です Fx.Tween, 、新しいものを作成します Fx.Tween その要素のインスタンスを作成し、一度に 1 つのプロパティにバインドします。

http://mootools.net/docs/core/Fx/Fx.Tween#Element-Properties:tween - iirc のため、要素のゲッター/セッターは要素ストレージに入る単一のインスタンスでのみ動作できるため、おそらく互いに干渉する 2 つのトゥイーンをインスタンス化しています。

使いたい morph その代わり - http://mootools.net/docs/core/Fx/Fx.Morph そしてオブジェクトを渡します。つまり、

_input.morph({
    opacity: 1,
    height: 100
});

モーフは、統合されたタイマーで同じ要素オブジェクトの複数のプロパティを変更することを目的としていました。

手動で行うこともできます new Fx.Tween(_input, ... ) 2 回実行すると機能しますが、アニメーションでは 100% 同じクロックではないため、途切れ途切れに見える場合があります。