ReactJS componente:fadeIn / fadeOut o mouse enter / mouse-deixar

Question

Eu criei um simples componente reactjs (tipo de um valor-selecionador: plunker)

Agora, eu quero que as partes superior e inferior do controle para ser escondido (opacity=0) e anime-os para opacity=1 quando o usuário passa o central div (.range-picker-selection) com o mouse.

Desde que não há nenhuma maneira que eu possa operar com DOM diretamente a partir de funções de meu componente (reactjs desencoraja esse) eu acho que eu deveria mudar o estado ( algo como state.expanded = true) e dependem de reactjs para refletir a alteração.

Mas como posso conseguir o efeito de animação?
Com o jQuery que eu teria usado element.animate({opacity:0}) mas agora eu não tenho acesso a DOM

Answer 1

Algo como isso?

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

Eu atualizei o estado pairava atributo e dois do mouse entrar / sair de métodos para definir o valor que estiver vinculado o .gama-selecionador-seleção de elemento a função de renderização

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

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

Eu também atualizou a função de renderização para definir a opacidade de 0 ou 1 de acordo com os elementos.

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

Finalmente, o real animação é feita com animações CSS

transition: opacity 1s;

Espero que isso ajude