如何在Hover上制作React动画？

Question

我需要像在此example中那样在菜单项下划线移动。

使用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>