我有一个交换两个节点位置的函数。
figlio.animate({
position: posInizPadre,
style: {
backgroundColor: 'green'
}
}, {
duration: 2000
});
padre.animate({
position: posInizFiglio,
style: {
backgroundColor: 'red'
}
}, {
duration: 2000
});
我想在padre.animate()函数结束后执行一个函数。
我尝试在animate()中使用complete属性,但它跳过动画并立即执行该函数。我甚至尝试使用setTimeout但是得到相同的结果,该函数立即执行并且没有动画
如果我自己使用它,动画就可以工作
你需要使用complete回调:
complete:动画完成时调用的函数。
figlio.animate({
position: posInizPadre,
style: {
backgroundColor: 'green'
}
}, {
duration: 2000,
complete: function(){
console.log('Animation complete');
}
});
我做了一个完整功能正常工作的例子
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.5.3/cytoscape.min.js"></script>
</head>
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<body>
<div id="cy"></div>
<script>
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
}]
});
cy.animate({
pan: { x: 50, y: 50 },
zoom: 1,
style: {
backgroundColor: 'red'
},
complete:function(e){
console.log('Complete');
},
}, {
duration: 2000
});
</script>
</body>
</html>