可链式功能不按预测顺序运行

Question

我有一个可链接的函数，它很简单，我传递值来为它设置一定数量的像素。如果我只调用该对象的一个​​方法，它有时会起作用，包括动画。如果我尝试链接2个方法，它只应用其中一个翻译（第二个）并且总是没有动画。这是函数：

var block = document.getElementById('mickeyBlock');
var animateBlock = {
    currentBlock: block,
    moveX: function(distance) {
        this.currentBlock.style.transform = 'translateX(' + distance + ')';
        return this;
    },
    currentBlock: block,
    moveY: function(distance) {
        this.currentBlock.style.transform = 'translateY(' + distance + ')';
        return this;
    }
}
window.onload = animateBlock.moveX('300px').moveY('10px');

我试图将第二种方法作为回调传递，但是没有用（也许我做错了）。但是，这应该是可链接的，因此，无需将第二种方法作为回调传递。

为什么会发生这种情况，这是否需要某个过渡时间的监听器？

这是链接：

https://codepen.io/damianocel/pen/MvvXoq

Answer 1

要组合两个转换，请在转换分配

中使用+ =而不是=

transform应用秒将覆盖首先应用的那个。为避免这种情况，请更改

this.currentBlock.style.transform = 'translateX(' + distance + ')';

到

this.currentBlock.style.transform += 'translateX(' + distance + ')';

，同样适用于translateY。

有一行代码重复

与您的问题无关，但currentBlock: block,出现两次。