Did you notice how Excel uses animation to move the selection marquee? That effect makes it easier for the eye to follow the selection. Adding similar animation effects to the FlexGrid control is incredibly easy. Simply add a transition to the style of the marquee and cell header elements:
.wj-flexgrid .wj-marquee,
.wj-flexgrid .wj-header {
transition: all .4s;
}
Now the marquee and selected header indicators will be animated, just like they are in Excel. You can see the effect by selecting a cell or a range with the mouse or keyboard.
You can see this in action in our FlexGrid CSS Animations fiddle.
In addition to the marquee, you can animate the grid cells, as well. This effect shows when you resize, drag, or sort the columns:
.wj-flexgrid .wj-marquee,
.wj-flexgrid .wj-header,
.wj-flexgrid .wj-cell {
transition: all .4s;
}
If you feel like it, you can also customize the animation effects by adding a transition timing function. This allows you to specify how the transition happens over time. The cubic-bezier page allows you to play with this.
.wj-flexgrid .wj-marquee,
.wj-flexgrid .wj-header,
.wj-flexgrid .wj-cell {
transition: all .4s;
/* want to play? -> http://cubic-bezier.com */
transition-timing-function: cubic-bezier(.5,0,.5,1)
}
See and play with the animations in our FlexGrid CSS Animations fiddle.
