未触发的一组元素上的 SnapSVG 动画回调

Question

见JSfiddle！

我想为一组元素设置动画并在完成后执行回调：

s.selectAll('.active').animate( {
        transform: matrix 
    },
    300,
    mina.linear,
    function() {
       //callback doesnt fire
       alert('callback')
    }
)

元素动画正确，但回调未执行。

但是，当我将动画应用于 组 元素时，会触发回调：

group.animate( {
        transform: matrix 
    },
    300,
    mina.linear,
    function() {
       alert('callback')
    }
)

.. 但是我不想将我选择的元素放在一个组中，因为这会在其他地方导致更多的复杂性。

是否可以对我通过 .select() 或 .selectAll() 获得的一组元素进行动画处理，同时能够触发回调？

提前非常感谢！

编辑：对于未来的读者，您可以使用 forEach 为一组元素设置动画，并计算所有元素是否都已完成动画：

function hideToPoint(elements, x, y, callback) {
    var finished = 0;
    elements.forEach(function(e) {

        e.animate( {
                //do stuff
            },
            300,
            mina.linear,
            function () {
                finished++;
                if (finished == elements.length) {
                    callback();
                }
            }
        )
    })
}

Answer 1

我将尝试回答几个问题，即使我不确定是否与回调有关。如果没有像 jsfiddle 这样的适当测试，很难判断它是否只是示例代码。

但是，上面的代码至少有2个问题。

创建矩阵是用

new Snap.Matrix();   // as opposed to Snap.matrix()

还有

elements.animate()

这里的问题是 animate 作用于一个元素（编辑：看起来它可以作用于集合中的元素，但不是这里的回调示例，edit2：现在可能支持集合上的回调），而不是多个元素这样（您有时可以将某些东西应用于单独处理它们的集合，但据我所知，动画并非如此）。

所以你要么想做一个

elements.forEach( function(el) { el.animate({blah: value}, 2000, mina.linear.callback ) 
});

或者如果它是一个 svg 组（而不是一个集合），原始代码可能会起作用（但我将其称为“myGroup”或其他名称，而不是“元素”，以提高代码的可读性和猜测它包含的内容）

fiddle（已包含使用快照动画字符串的不同动画）