Componente ReactJS:desvanecerse / desvanecerse al ingresar con el mouse / salir del mouse

Question

He creado un componente simple en reactjs (una especie de seleccionador de valores: plomero)

Ahora quiero que las partes superior e inferior del control estén ocultas (opacity=0) y animar a opacity=1 cuando el usuario pasa el cursor por la central div (.range-picker-selection) con el ratón.

Ya que no hay manera de que pueda operar con DOM directamente desde funciones de mi componente (reactjs desalienta esto) Supongo que debería cambiar el estado (a algo como state.expanded = true) y confiar en reactjs para reflejar el cambio.

Pero, ¿cómo puedo lograr el efecto de animación?
Con jQuery hubiera usado element.animate({opacity:0}) pero ahora no tengo acceso a DOM

Answer 1

algo como esto?

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

Actualizé el estado para tener un atributo flotado y dos métodos de entrada / salida de mouse para establecer el valor que están unidos al elemento de selección de selección de recargo en la función de render

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

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

También actualizé la función de renderización para establecer la opacidad a 0 o 1 en consecuencia para los elementos.

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

Finalmente, la animación real se realiza con animaciones CSS

transition: opacity 1s;

Espero que esto ayude