Snap SVG .animate回调立即触发

Question

我试图将一组参数传递给Snap SVG中的animate函数,包括一个回调函数.但是,回调(在这种情况下是删除元素)会在单击时立即触发,而不是在动画完成后触发.就像现在一样,元素被删除,然后animate函数出错,因为元素不再存在.有任何想法吗？

    var theCallback = theApp.destroyAnElement("#"+ theParentID); 

//The function call
theAnimationFunctions.animateSingleSVGElementWithSnap('.stopped','#svg-container',{transform: 's1,0'}, 500, mina.backin, 0,0,theCallback);

// The animate function
    animateSingleSVGElementWithSnap: function(element, parentSVG, animationValues, duration, easing, initialDelay, callback) {
       var s = Snap.select("#"+ parentSVG),
           theElement = s.select(element);

       setTimeout(function() {
         theElement.stop().animate(animationValues, duration, easing, function() {
             callback;
         });
      }, initialDelay);
    }

UPDATE

theCallback = function () { theApp.destroyAnElement("#"+ theElementID); };

theAnimationFunctions.animateSingleSVGElementWithSnap('.stopped','#svg-container',{transform: 's1,0'}, 500, mina.backin, 0,0,theCallback);

theAnimationFunctions = {
    animateSingleSVGElementWithSnap: function(element, parentSVG, animationValues, duration, easing, initialDelay, callback) {
    var s = Snap.select("#"+ parentSVG),
    theElement = s.select(element);

    setTimeout(function() {
       theElement.stop().animate(animationValues, duration, easing, function() {
            callback();
       });
    }, initialDelay);
}

通过上面的更新,我现在在动画完成时收到错误:

"Uncaught TypeError: callback is not a function"

Answer 1

您必须将回调包装在匿名函数中以防止它立即触发：

var theCallback = function () { theApp.destroyAnElement("#"+ theParentID); };

然后将其作为函数调用：

theElement.stop().animate(animationValues, duration, easing, function() {
         theCallback(); // <-- notice the parenthesis
     });