Snap SVG .animate 回调立即触发
Snap SVG .animate callback fires immediately
我正在尝试将一组参数传递给 Snap SVG 中的动画函数,包括回调函数。但是,回调(在本例中是删除元素)会在单击时立即触发,而不是在动画完成后触发。就像现在一样,该元素被删除,然后 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"
您必须将回调包装在匿名函数中以防止它立即触发:
var theCallback = function () { theApp.destroyAnElement("#"+ theParentID); };
然后将其作为函数调用:
theElement.stop().animate(animationValues, duration, easing, function() {
theCallback(); // <-- notice the parenthesis
});
我正在尝试将一组参数传递给 Snap SVG 中的动画函数,包括回调函数。但是,回调(在本例中是删除元素)会在单击时立即触发,而不是在动画完成后触发。就像现在一样,该元素被删除,然后 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"
您必须将回调包装在匿名函数中以防止它立即触发:
var theCallback = function () { theApp.destroyAnElement("#"+ theParentID); };
然后将其作为函数调用:
theElement.stop().animate(animationValues, duration, easing, function() {
theCallback(); // <-- notice the parenthesis
});