如何在 Hover 上制作 React 动画？

Question

我需要像本例中那样移动菜单项下划线。

使用 jQuery，我只需获取菜单项的左侧位置和宽度即可。然后stop.animation悬停执行。

我正在尝试用 制作这样的动画React。但我不知道该怎么做。经过谷歌研究后，我发现了流行的动画反应运动库。但我找不到如何在悬停时触发动画的方法。

我的任务是在悬停时移动蓝色下划线div。请帮助我找到解决方案。

Answer 1

您可以使用 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上的一个例子