Question

我想执行一个循环（1.），等到该循环的动画结束，然后用动画执行第二个循环（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

通过animations和cy.animation()创建ele.animation()。

ele.animation().promise()承诺您可以使用链接。

JQuery，cytoscape.js - 如何对包含cytoscape动画的两个不同循环进行排队？

1 个答案: