JQuery、cytoscape.js - サイトスコープアニメーションを含む2つの異なるループをキューに入れるにはどうすればいいですか？

Question

私は1つのループ（1.）を実行し、そのループの終了からアニメーションが来るまで待ってから、アニメーション（2.）で2番目のループを実行します。誰かがこの特定のケースで最適な方法でそれを行う方法を教えてもらえますか？

cy.on("tap", ".story_node", function() { 
    var node = this; 

    var crudObjects = [ 
     { 
      node: { group: "nodes", data: { id: "edit", content: "Edytuj" }, position: { x: node.position("x"), y: node.position("y") }, classes: "crud" }, 
      edge: { group: "edges", data: { source: node.id(), target: "edit" }, classes: "crud_edge" }, 
      targetPos: { x: node.position("x") + 150, y: node.position("y") - 75 } 
     }, 
     { 
      node: { group: "nodes", data: { id: "create", content: "Dodaj" }, position: { x: node.position("x"), y: node.position("y") }, classes: "crud" }, 
      edge: { group: "edges", data: { source: node.id(), target: "create" }, classes: "crud_edge" }, 
      targetPos: { x: node.position("x") + 200, y: node.position("y") } 
     }, 
     { 
      node: { group: "nodes", data: { id: "delete", content: "Usuń" }, position: { x: node.position("x"), y: node.position("y") }, classes: "crud" }, 
      edge: { group: "edges", data: { source: node.id(), target: "delete" }, classes: "crud_edge" }, 
      targetPos: { x: node.position("x") + 150, y: node.position("y") + 75 } 
     } 
    ]; 

    // (1.) 
    var areCrudNodesAdded = cy.$(".crud").length > 0; 
    var source = cy.$(".crud").predecessors().sources().first(); 
    var delay = 0; 
    var duration = 250; 
    if (areCrudNodesAdded) { 
     var crudNodes = cy.$(".crud"); 
     for (var i = 0; i < crudNodes.length; i++) { 
      var currNode = crudNodes[i]; 
      (function (currNode) { 
       currNode.delay(delay).animate({ 
        position: source.position(), 
        css: { 
         "width": 10, 
         "height": 10, 
         "border-width": 0, 
         "opacity": 0 
        } 
       }, { 
        duration: duration, 
        complete: function() { 
         currNode.remove(); 
        } 
       }); 

       delay += duration; 
      })(currNode); 
     } 
    } 

    // (2.) 
    if (!areCrudNodesAdded || source !== this) { 
     source = this; 
     $.each(crudObjects, function (idx, crud) { 
      var crudNode = cy.add(crud.node); 
      cy.add(crud.edge); 

      crudNode.css({ 
       "width": 10, 
       "height": 10, 
       "border-width": 0, 
       "opacity": 0 
      }).delay(delay).animate({ 
       position: crud.targetPos, 
       css: { 
        "width": 80, 
        "height": 80, 
        "border-width": 2, 
        "opacity": 1 
       } 
      }, { 
       duration: duration, 
       complete: function() { 
        crudNode.removeCss(); 
       } 
      }); 

      delay += duration; 
     }); 
    } 
}); // on tap 

Answer 1

cy.animation()とele.animation()経由animationsを作成します。

ele.animation().promise()は、連鎖に使用できることを約束します。