CSS Item Style

This demo styles and animates all graph items via CSS and the cssClass property on the library styles.

CSS classes allow for easy transitions and animations to animate state changes on the graph items.

The demo illustrates a hover effect and selection state highlight purely by adjusting the cssClass property on the graph item in combination with CSS rules.

The CSS stylesheet for the graph items of the displayed sample is shown in the sidebar on the right-hand side.

Things to Try

• Hover a node to trigger the hover effect and show the node's CSS classes.
• Click a node to highlight the node and the direct connections of it.
• Apply stylesheet changes in the editor and watch the effect on the graph items.
• Press and hold the following button to see how things look without CSS.