どうすれば固定データテーブルコンポーネントのセルをアニメーション化できますか？

Question

FacebookのfixedDataTableを使用して在庫ダッシュボードを表示しています。私が達成する必要があるのは、フラッシュの固定データテーブルのセル（価格の列を言う）は、緑または赤の価格の変化に基づいています。どのように固定データテーブル内のアニメーションを達成するのですか？

Answer 1

データシート<Cell>の子コンポーネントでこれをCSSで行うことができます。ような何か：

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()は、そうでない場合は、アニメーションが動作しません、あなたがsetTimeoutを行いますので、本当に速いと呼ばれています。

CSSでは、アニメーションを追加することができます。

• 派手なフラッシュクラスイン：コンポーネントにハイライト色、およびCSS遷移
• 空想フラッシュ級アウトを与えます： CSSアニメーションの基本的な構成要素の色は、あなたのCSSファイルで

だから、基本的な色に戻って赤や緑から行く：

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

シンプルなデモcodepen here