Компонент ReactJS:FadeIn/FadeOut при вводе/отпуске мыши

Question

Я создал простой компонент на reactjs (что-то вроде средства выбора значения: пинчер)

Теперь я хочу, чтобы верхняя и нижняя части элемента управления были скрыты (opacity=0) и анимировать opacity=1 когда пользователь наводит курсор на центральную div (.range-picker-selection) с помощью мыши.

Поскольку я не могу работать с DOM непосредственно из функций моего компонента (reactjs это не одобряет) Думаю, мне следует изменить состояние (на что-то вроде state.expanded = true) и полагаться на reactjs чтобы отразить изменение.

Но как добиться эффекта анимации?
С jQuery я бы использовал element.animate({opacity:0}) но теперь у меня нет доступа к DOM

Answer 1

Что-то вроде этого?

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

Я обновил состояние, добавив атрибут зависания и два метода ввода/вывода мыши, чтобы установить значение, привязанное к элементу .range-picker-selection в функции рендеринга.

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

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

Я также обновил функцию рендеринга, чтобы установить для элементов непрозрачность 0 или 1 соответственно.

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

Наконец, фактическая анимация выполняется с помощью CSS-анимации.

transition: opacity 1s;

надеюсь, это поможет