Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Snap SVG .animate callback fires immediately

I am trying to pass a set of arguments to an animate function within Snap SVG including a callback function. However, the callback (in this case is to remove the element) fires immediately on click and not after the animation has completed. As it is now, the element is removed and the animate function then errors because the element no longer exists. Any ideas?

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

With the updates above, I now get an error at the completion of the animation:

"Uncaught TypeError: callback is not a function"
like image 435
Yuschick Avatar asked Nov 01 '22 01:11

Yuschick


1 Answers

You have to wrap the callback in an anonymous function to prevent it from firing immediately:

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

And then call it as a function:

theElement.stop().animate(animationValues, duration, easing, function() {
         theCallback(); // <-- notice the parenthesis
     });
like image 143
musically_ut Avatar answered Nov 15 '22 06:11

musically_ut