JQuery, cytoscape.js - Wie zwei verschiedene Loops mit Cytoscape-Animationen anstehen?

Question

Ich möchte eine Schleife (1.) ausführen, warten bis Animationen von dieser Schleife enden, dann zweite Schleife mit Animationen (2.) ausführen. Kann mir jemand in diesem speziellen Fall sagen, wie ich es optimal machen soll?

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

animations erstellen über cy.animation() und ele.animation().

ele.animation().promise() gibt ein Versprechen, das Sie für die Verkettung verwenden können.