如何在 Hover 上制作 React 动画？

Question

我需要像这样移动菜单项下划线 example。

使用 jQuery 我会简单地获取菜单项的左侧位置和宽度。然后在悬停时执行stop.animation。

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

我的任务是在 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>

这是 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>

如何在 Hover 上制作 React 动画？

How to make React animation on Hover?

javascript

animation

reactjs

react-motion