关于javascript:Cytoscape.js动画节点颜色

 2021-04-26 

Cytoscape.js Animate Node Color

我试图了解有关Cytoscape.js动画的更多信息。查看此处的文档,如果我理解正确,则应将节点颜色更改为一秒钟的蓝色,请稍等片刻,然后将节点颜色更改为黄色。但是,当我点击按钮查看示例时,它什么也没做。

我尝试在自己的代码中执行类似的操作:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$(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");
                }
            });
        }
    });
});

但是颜色还是不变。

最终,我希望使用动画和样式来动画化节点的大小,但是我只是想弄清楚对其进行动画处理的基本知识,并被困在这里。预先感谢您的帮助!


style别名似乎不起作用。尝试使用css代替style,直到修复:

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