如何在Hover上制作反应动画？

Question

我需要移动菜单项下划线，就像在这个示例。

有了jQuery，我就可以简单地得到菜单项的左边位置和宽度。然后在悬停时执行stop.animation。

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

我的任务是在div悬停上移动蓝色下划线。请帮我找到解决办法。

​

Answer 1

您可以使用css转换和对下一行的绝对定位条来实现这一点。然后，在元素悬停时更新条带的左属性。

​

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>

​

下面是码页上的一个示例

Answer 2

你不一定要用反应来做。这可以通过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>

​