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");
                }
            });
        }
    });
});

但颜色也不会改变任何颜色。

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

Answer 1

看起来style别名不起作用。尝试css代替style，直到修正：

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

Cytoscape.js动画节点颜色

1 个答案: