Allow transitions for animations, specified in stylesheet

[ghost]

cy.nodes().animate({css:"height" :10},{duration:1000}); works but cy.nodes().animate({css:"height":'mapData(weight,20,40,10,80)'},{duration:1000}); does not work

[maxkfranz]

Mappers are not supported in animations, at least not yet. There are important performance considerations, because the animations and the mappers can both be expensive on their own. I'll take a look at this, and I'll put my updates in this ticket for you to follow. Thanks -Max

On Monday, 19 August 2013 at 10:20, salpen wrote:

cy.nodes().animate({css:"height" :10},{duration:1000}); works but cy,nodes().animate({css:"height":'mapData(weight,20,40,10,80)'},{duration:1000}); does not work

— Reply to this email directly or view it on GitHub (https://github.com/cytoscape/cytoscape.js/issues/316).

[maxkfranz]

Unless this can be done without impacting performance, it's not worth it to add. A mirror of the mapping function could be created to manually calculate the final animation value.

[maxkfranz]

e.g. ele.mapData('weight', 20, 40, 10, 80)

[maxkfranz]

I'm changing this ticket. A better solution than supporting programmatic access to calculated mapper values is to allow for animation transitions. This should support your usecase: Rather than manually specifying the same mapper used in a stylesheet in the call to eles.animate(), you could simply specify style properties to transition.

Something along the lines of:

node {
  height: 10px;
  width: 10px;
}

node:selected {
  height: mapData(weight, 20, 40, 10, 80);
  width: mapData(weight, 20, 40, 10, 80);
  transition-property: height, width;
  transition-duration: 1s;
}

So instead, it becomes the responsibility of the styler to add the animation on the state change to node:selected.

[maxkfranz]

Try to use syntax from: http://www.w3schools.com/css/css3_transitions.asp