如何在 cytoscape 动画结束后执行函数？

Question

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

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

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

我尝试在 animate() 中使用完整的属性，但它会跳过动画并立即执行函数。我什至尝试使用 setTimeout 但我得到了相同的结果，该功能立即执行并且没有动画

如果我自己使用动画效果很好

Answer 1

您需要使用complete回调：

complete: A function to call when the animation is done.

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

Answer 2

我已经完成了一个可以正常运行且功能完整的示例

<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>

如何在 cytoscape 动画结束后执行函数？

How to execute a function after the end of a cytoscape animation?

javascript

cytoscape.js