Wie kann ich Zelle der festen Datentabelle Komponente animieren?

Question

Ich verwende Facebooks FixedDataTable, um das Aktien-Dashboard anzuzeigen. Was ich erreichen muss, ist Flash feste Datentabelle Zelle (sagen Preis Spalte) grün oder rot basierend auf der Änderung des Preises. Wie erreichen wir Animation innerhalb der festen Datentabelle?

Answer 1

Sie könnten dies mit CSS in den untergeordneten Komponenten der Datentabelle <Cell> tun. Etwas wie:

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() ist wirklich schnell genannt, so dass Sie ein setTimeout, sonst wird die Animation tun wird nicht funktionieren.

In CSS können Sie Animationen hinzufügen:

• fancy-Flash-Klasse-in: gibt der Komponente eine Highlight-Farbe und einen CSS-Übergang
• fancy-Flash-Klasse-out: die Basiskomponente der Farbe, mit CSS-Animation von rot oder grün zu Grundfarbe zurück

Also in Ihrer CSS-Datei:

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

Einfache Demo codepen here