Tweens在同一个元素上

Question

如果我在同一个元素上应用2个补间，则不会补间。为什么？或者我做错了什么？

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

但两者都是单独的。

Fiddle

Answer 1

Element.prototype.tween是Fx.Tween的抽象，它在该元素上创建一个新的Fx.Tween实例，并且一次绑定到一个属性。

http://mootools.net/docs/core/Fx/Fx.Tween#Element-Properties:tween - 你正在设置两个可能互相干扰的补间，因为iirc，元素getter / setter只能用于单个实例 - 它进入Element Storage。

您希望使用morph代替 - http://mootools.net/docs/core/Fx/Fx.Morph并传递一个对象，即

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

morph意味着修改统一计时器上同一元素对象的多个属性。

您可以手动执行new Fx.Tween(_input, ... )两次，但它可以正常工作，但在动画的同一时钟上可能不是100％，所以它可能看起来很不稳定