mootools - 同一元素上的补间

Question

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

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

但两者都单独工作。

小提琴

Answer 1

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

http://mootools.net/docs/core/Fx/Fx.Tween#Element-Properties:tween - 自iirc以来，您正在设置两个可能相互干扰的补间，元素获取器/设置器只能与单个实例一起使用- 进入元素存储。

你想morph改用 - http://mootools.net/docs/core/Fx/Fx.Morph并传递一个对象，即

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

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

您可以手动执行new Fx.Tween(_input, ... )两次，它会起作用，但动画可能不是 100% 在同一时钟上，所以它可能看起来不连贯