细胞景观动画结束后如何执行功能?

时间:2019-04-20 13:59:40

标签: javascript cytoscape.js

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

from flask_cors import CORS
CORS(app,origin='http://localhost:3000',credentials='true')

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

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

如果我自己使用动画,那么动画会起作用

2 个答案:

答案 0 :(得分:0)

您需要使用 complete 回调:

  

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

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

答案 1 :(得分: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>