如何在cytoscape动画结束后执行一个函数?

问题描述 投票:0回答:2

我有一个交换两个节点位置的函数。

figlio.animate({
  position: posInizPadre,
  style: {
    backgroundColor: 'green'
  }
}, {
  duration: 2000
});
padre.animate({
  position: posInizFiglio,
  style: {
    backgroundColor: 'red'
  }
}, {
  duration: 2000
});

我想在padre.animate()函数结束后执行一个函数。

我尝试在animate()中使用complete属性,但它跳过动画并立即执行该函数。我甚至尝试使用setTimeout但是得到相同的结果,该函数立即执行并且没有动画

如果我自己使用它,动画就可以工作

javascript cytoscape.js
2个回答
0
投票

你需要使用complete回调:

complete:动画完成时调用的函数。

figlio.animate({
    position: posInizPadre,
    style: {
        backgroundColor: 'green'
    }
}, {
    duration: 2000,
    complete: function(){
        console.log('Animation complete');
    }
});

0
投票

我做了一个完整功能正常工作的例子

<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>
© www.soinside.com 2019 - 2024. All rights reserved.