Composant ReactJS :fadeIn / fadeOut lors de l'entrée / sortie de la souris

Question

J'ai créé un composant simple sur reactjs (une sorte de sélecteur de valeur : plongeur)

Maintenant, je veux que les parties supérieure et inférieure du contrôle soient masquées (opacity=0) et animer pour opacity=1 lorsque l'utilisateur survole le centre div (.range-picker-selection) avec la souris.

Puisqu'il n'y a aucun moyen pour moi d'opérer avec DOM directement à partir des fonctions de mon composant (reactjs décourage cela) Je suppose que je devrais changer l'état (en quelque chose comme state.expanded = true) et compter sur reactjs pour refléter le changement.

Mais comment puis-je obtenir l’effet d’animation ?
Avec jQuery j'aurais utilisé element.animate({opacity:0}) mais maintenant je n'ai plus accès DOM

Answer 1

Quelque chose comme ça?

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

J'ai mis à jour l'état pour avoir un attribut survolé et deux méthodes d'entrée/sortie de souris pour définir la valeur qui est liée à l'élément .range-picker-selection dans la fonction de rendu

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

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

J'ai également mis à jour la fonction de rendu pour définir l'opacité sur 0 ou 1 en conséquence pour les éléments.

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

Enfin, l'animation proprement dite est réalisée avec des animations CSS

transition: opacity 1s;

J'espère que ça aide