Cytoscape.js 动画节点颜色

Question

我正在尝试了解有关 Cytoscape.js 动画的更多信息。查看文档 here，如果我理解正确，它应该在一秒钟内将节点颜色更改为蓝色，等待一秒钟，然后将节点颜色更改为黄色。但是，当我点击按钮查看示例时，它什么也没做。

我试图在我自己的代码中做类似的事情：

$(function() {
    $('#cy').cytoscape({
        style: cytoscape.stylesheet()
            .selector('node')
                .css({
                    'content': 'data(name)',
                    'text-valign': 'center',
                    'color': 'black'
                }),

        ready: function(){
            window.cy = this;

            cy.add({
                group: 'nodes',
                data: {name: 'test', id: '1'},
                position: {x: 200, y: 100}
            });

            cy.nodes().animate({
                style: {
                    'background-color': 'blue'
                }
            }, {
                duration: 2000,
                complete: function() {
                    console.log("Done");
                }
            });
        }
    });
});

但颜色仍然没有任何变化。

最终我希望使用 animate 和 style 来动画改变节点的大小，但我只是想弄清楚动画的基础知识并被困在这里。在此先感谢您的帮助！

Answer 1

style 别名似乎无效。尝试 css 代替 style 直到固定：

https://github.com/cytoscape/cytoscape.js/issues/1047

Cytoscape.js 动画节点颜色

Cytoscape.js Animate Node Color

javascript

cytoscape.js