Как сделать анимацию React на Hover? - PullRequest
Новая
       22

Как сделать анимацию React на Hover?

0 голосов
/ 03 октября 2018

Мне нужно переместить пункт меню с подчеркиванием, как в этом примере .

С jQuery я бы сделал это, просто получив левую позицию и ширину пункта меню.А затем выполните stop.animation при наведении курсора.

Я пытаюсь сделать такую ​​анимацию с React.Но я не могу понять, как это сделать.После исследования Google я нашел популярную библиотеку реагирования-движения для анимации.Но я не могу найти способ, как вызвать анимацию при наведении.

Моя задача - переместить синее подчеркивание на div при наведении курсора.Пожалуйста, помогите мне найти решение. enter image description here

1 Ответ

0 голосов
/ 03 октября 2018

Вы можете сделать это, используя css-переход и абсолютно расположенную полосу для нижней линии.Затем обновите свойство left полосы, когда элемент наведен. 

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      left: 0,
    }
  }
  
  handleMouseEnter = (e) => {
    this.setState({
      left: e.target.getBoundingClientRect().x - 8,
    });
  }

  render() {
    return (
      <div className="App">
        <div className="box" onMouseEnter={this.handleMouseEnter} />
        <div className="box" onMouseEnter={this.handleMouseEnter}  />
        <div className="box" onMouseEnter={this.handleMouseEnter}  />
        <div className="box" onMouseEnter={this.handleMouseEnter}  />
        <div className="stripe" style={{ left: this.state.left }}/>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
.App {
  width: 900px;
  overflow: hidden;
  position: relative;
  padding-bottom: 20px;
}
.box {
  width: 200px;
  height: 200px;
  background: #eee;
  border: 1px solid #333;
  float: left;
  margin-right: 10px;
}
.stripe {
  width: 200px;
  height: 10px;
  background: blue;
  position: absolute;
  bottom: 0;
  transition: left 0.3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Вот пример codepen

...