Cytoscape.js动画节点颜色

Question

I'm trying to understand more about the Cytoscape.js animate. Looking at the documentation here , if I understand that properly it should change the node color to blue over a second, wait a second, and then change the node color to yellow. However, when I hit the button to view the example it doesn't do anything.

I tried to do something similar in my own code 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");
                }
            });
        }
    });
});

but again the color doesn't change any.

Ultimately I'm hoping to use the animate and style to animate changing the size of a node, but I was just trying to figure out the basics of animating it and got stuck here. Thanks in advance for the help!

Answer 1

It looks like the style alias isn't working. Try css in place of style until fixed:

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