ReactJS Componente: Fadein / Fadeout su Mouse-ENTER / Mouse-Leave

Question

Ho creato un componente semplice su reactjs (tipo di un selettore di valore: plunker )

Ora, voglio che le parti superiori e inferiori del controllo siano nascoste (generacodictagcode) e animate a opacity=0 quando l'utente ha subito l'utente del opacity=1 centrale (div) con il mouse.

Dal momento che non c'è modo in cui posso funzionare con .range-picker-selection direttamente dalle funzioni del mio componente (DOM scoraggia questo) Immagino che dovrei cambiare lo stato (a qualcosa come reactjs) e fare affidamento su state.expanded = true per riflettere la modifica.

Ma come posso raggiungere l'effetto di animazione?
Con jquery avrei usato reactjs ma ora non ho accesso a element.animate({opacity:0})

Answer 1

qualcosa del genere?

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

Ho aggiornato lo stato per avere un attributo innottamento e due metodi di invio / congedo del mouse per impostare il valore che è vincolato l'elemento. Gange-selector-Selection nella funzione di rendering

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

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

.

Ho anche aggiornato la funzione di rendering per impostare l'opacità a 0 o 1 di conseguenza per gli elementi.

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

Infine, l'animazione effettiva viene eseguita con le animazioni CSS

transition: opacity 1s;

Spero che questo aiuti