同一元素上的补间动画

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只能与单个实例一起工作 - 进入元素存储。

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

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

变身是为了修改一个统一的计时器同一元素对象的多个属性。

你可以做手工new Fx.Tween(_input, ...)两次，它会工作，但它可能不是100％对动画相同的时钟，因此它可能看起来波涛汹涌