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

更新

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

Snap SVG .animate回调立即触发

1 个答案: