javascript - 如何在 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的例子

Answer 2

你真的不必用 React 来做这件事。box-shadow如果您不介意框下方的下划线，可以使用 来实现。它还允许您将其模糊一点以获得更多样式。

.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;
}

.box:hover {
  box-shadow: 0 10px blue;
  transition: box-shadow 0.3s;
}

<div class="App">
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
</div>