ReactJS-Komponente:fadeIn / fadeOut bei Mauseingabe / Mausverlassen

Question

Ich habe eine einfache Komponente erstellt reactjs (eine Art Wertauswahl: Plunker)

Jetzt möchte ich, dass der obere und untere Teil des Steuerelements ausgeblendet wird (opacity=0) und animieren opacity=1 wenn der Benutzer mit der Maus über die Zentrale fährt div (.range-picker-selection) mit der Maus.

Da es keine Möglichkeit gibt, damit zu operieren DOM direkt aus Funktionen meiner Komponente (reactjs entmutigt dies) Ich schätze, ich sollte den Status ändern (in etwas wie state.expanded = true) und verlassen Sie sich darauf reactjs um die Veränderung widerzuspiegeln.

Aber wie kann ich den Animationseffekt erzielen?
Mit jQuery hätte ich verwendet element.animate({opacity:0}) aber jetzt habe ich keinen Zugriff darauf DOM

Answer 1

Etwas wie das?

http://plnkr.co/edit/5tLWNTtpsSWBUCgnKwQO?p=preview

Ich habe den Status so aktualisiert, dass er über ein schwebendes Attribut und zwei Eingabe-/Verlassensmethoden mit der Maus verfügt, um den Wert festzulegen, die an das .range-picker-selection-Element in der Renderfunktion gebunden sind

<div className="range-picker-selection" onMouseEnter={this.onMouseEnterHandler} onMouseLeave={this.onMouseLeaveHandler}>

  onMouseEnterHandler: function () {
    this.setState({
      hovered: true
    })
  },
  onMouseLeaveHandler: function () {
    this.setState({
      hovered: false
    })  
  },

Ich habe auch die Renderfunktion aktualisiert, um die Deckkraft für die Elemente entsprechend auf 0 oder 1 zu setzen.

style={{opacity: this.state.hovered ? 1 : 0}}

Schließlich erfolgt die eigentliche Animation mit CSS-Animationen

transition: opacity 1s;

ich hoffe das hilft