Question

我创建了一个永久移动的简单圆圈。现在，我想通过这种方式使动画复杂一点：

当用户将鼠标悬停在其上时，圆圈停止移动
当用户单击它时，圆圈应该像容器大小一样变大。

我想使用React。

我用自己的代码创建this CodePen，希望对您有所帮助。

function App() {
  const diameterPx = 200

  const circleStyle = {
    width: diameterPx,
    height: diameterPx,
    borderRadius: diameterPx,
    top: '30%',
    left: '30%',
    animation: 'circle-rotation 20s infinite linear',
  }

  return (
    <div
      className="absolute flex flex-center pointer bg-red"
      style={circleStyle}
      onClick={this.becomeBigger}
      onMouseOver={this.stopMove}
    />
  )
}

我的CSS：

body, html {
    height: 100%;
}

@keyframes circle-rotation {
  from {
    transform: rotate(0deg) translate(-20px) rotate(0deg);
  }

  to {
    transform: rotate(3600deg) translate(-20px) rotate(-3600deg);
  }
}

我的问题是我不知道如何编写两个功能becomeBigger和stopMove。

我看到了this example，但这对我没有用。.

Answer 1

要使其在鼠标悬停在其上方时暂停，请查看JavaScript事件onMouseEnter。然后使用onMouseLeave重新开始。

关于“扩大”圈子，请查看CSS动画。您可以在点击时将class添加到圈子中以使其变大，并添加动画使其看起来更漂亮。

希望这足以让您入门。

Answer 2

我已经更新了您的笔。本质上，您可以执行类似的操作，其中样式由组件状态控制。

https://codepen.io/anon/pen/QPzKwv?editors=1111

class App extends React.Component{
  state = {
    diameterPx: 200,
    top: '30%',
    left: '30%',
    animation: 'circle-rotation 20s infinite linear'
  }

   becomeBigger = () => {
    this.setState({
      diameterPx: this.state.diameterPx * 2
    })
  }

  stopMove = () => {
    this.setState({
      animation: ""
    })
  }

  render(){
     const circleStyle = {
        width: this.state.diameterPx,
        height: this.state.diameterPx,
        borderRadius: this.state.diameterPx,
        top: this.state.top,
        left: this.state.left,
        animation: this.state.animation,
    }

    return (
      <div
        className="absolute flex flex-center pointer bg-red"
        style={circleStyle}
        onClick={this.becomeBigger}
        onMouseOver={this.stopMove}
      />

      )
  }
}

不断发展壮大的CSS圈子onClick

2 个答案: