mootools - MooTools 补间百分比

Question

是否可以在 MooTools 中以百分比补间元素？

var slide = new Fx.Tween($('slide_box'));
$('next_slide').addEvent('click',function(){
    slide.start('left', '-100%');
});

但是这段代码将元素补间了 100 像素，而不是百分比。

Answer 1

看看基础Fx类，有一个设置单位的选项。您的示例可以重写为：

$('next_slide').addEvent('click', function(){
    new Fx.Tween('slide_box', {
        unit: '%'
    }).start('left', -100);
});

您可以在这里看到它的实际效果。

Answer 2

也许我忽略了一些明显的东西，但 -100% 不仅仅是“0px”吗？

如果一个元素在相对定位的 DIV 中的绝对左侧位置为 600px，则将该元素向左移动 -100% 将导致位置为 0,0（假设元素顶部为 0）。

因此，您可以通过变形来实现这一目标。

$('slide_box').morph({'left':'0px'});

如果您希望将元素移动 100% 以外的值，则可以使用简单的计算来找出所需的移动量。

var shiftPercentage = 70;
var elementPosition = $('slide_box').getPosition().x;
var resultingShiftAmount = (elementPosition/100)*shiftPercentage;
$('slide_box').morph({'left':resultingShiftAmount+'px'});

当然，根据您想将其转换为正数还是负数，使变量“resultingShiftAmount”为正数或负数。

希望这可以帮助。

进一步编辑，似乎 Tween 类有一个名为“unit”的选项。我想这不会像你期望的那样工作。

var slide = new Fx.Tween($('slide_box'),{unit:'%'});
slide.start('left','-100%');

上面的代码片段将元素'slide_box'相对于其包含元素的位置转换为-100％（至少在我的简短测试中似乎是这种情况）。例如 - 包含元素位于 0px，0px 的位置设置为相对。在这个元素中有一个绝对定位的元素在 500px,0px。正如我所看到的，如果您要在这个绝对定位的元素上使用上面的代码，它将绝对从包含元素的 0,0 开始定位，减去包含元素宽度的 100%。

这对我来说似乎有点令人困惑，但这就是测试所显示的。

祝你好运！