可链接函数在预测序列中不 运行

Question

我有一个可链接的函数，它很简单，我传递值以使其动画化一定数量的像素。如果我只调用对象的一种方法，它有时会起作用，包括动画。如果我尝试链接这两种方法，它只会应用其中一种翻译（第二种）并且总是没有 animation.This 是函数：

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');

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

为什么会这样，这是否需要某个地方的 transitionend 侦听器？

这里是 link:

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

Answer 1

要合并两个转换，请在转换分配中使用 += 而不是 =

第二个应用的 transform 将覆盖第一个应用的应用。为避免这种情况，请更改

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

到

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

translateY.

同样如此

有一行代码重复

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