CODEWITHSUNDEEP
reactjsreactcsstransitiongroupfixed-data-table
user1803361
user1803361

Reputation: 61

How can i Animate cell of fixed data table component?

I'm using facebooks fixedDataTable to show stock dashboard. what i need to achieve is flash fixed data table cell (say price column) green or red based on the change of price. How do we achieve animation inside fixed data table ?

Upvotes: 0

Views: 1211

Answers (1)

wintvelt
wintvelt

Reputation: 14101

You could do this with css in the children components of the datatable <Cell>. Something like:

componentWillReceiveProps(nextProps) {
  // if the price has changed, add a class to do some animation stuff
  if (nextProps.price != this.props.price) {
    this.setState( className: "fancy-flash-class-in" );
  }
}

componentDidUpdate() {
  // after the component has updated, set the class back
  if (this.state.className == "fancy-flash-class-in") {
    setTimeout(() = > this.setState(
      {className: "fancy-flash-class-out"}),
    500);
  }
}

componentDidUpdate() is called really fast, so you will do a setTimeout, otherwise the animation won't work.

In css, you can add animations:

  • fancy-flash-class-in: give the component a highlight-color, and a css transition
  • fancy-flash-class-out: the basic component color, with css animation to go back from red or green to basic color

So in your css file:

.fancy-flash-class-out {
  background-color: grey;
  transition: background-color 2s;
  -webkit-transition: background-color 2s; /* Safari */
}

Simple demo codepen here

Upvotes: 1

Related Questions