随着位置的变化，平稳对DIV进行动画动画

Question

我有一个绝对定位的div：

class MyDiv extends React.Component {
  state = {
    stepCount: 0
  };
  componentDidMount(){
    setInterval(() => {
      this.setState({ stepCount: this.state.stepCount + 1 })
    }, 1000);
  }
  render(){
    return (<div style={{ left: this.state.stepCount * 10 + "%" }} />);
  }
}
CSS
div { transition: 1s linear; }

每一秒钟，我将左DIV转换10％。我希望过渡看起来平稳，但是有点口吃。

示例：https://codepen.io/anon/pen/qongbq

Answer 1

使用CSS变换而不是动画的位置。它是表现更多的。

  render(){
    return (<div style={{ transform: `translateX(${this.state.step * 3 + "%"})`}} />);
  }

请参阅Medium

Answer 2

您最好使用CSS变换或一个模块（例如react-spring），但是如果它们都不适合您，那么您想要requestAnimationFrame。

（CSS变换可以使文本模糊CSS过渡效果使图像模糊/移动图像1px，在Chrome中？对于一次性，您可能不希望外部模块的束负载）

）

https://codesandbox.io/s/pj9m554nkj

const animate = ({ timing, draw, duration }) => {
  let start = performance.now();
  const animateLoop = time => {
    const durationFraction = Math.min(
      1,
      Math.max(0, (time - start) / duration)
    );
    const progress = timing(durationFraction);
    draw(progress);
    if (durationFraction < 1) {
      requestAnimationFrame(animateLoop);
    }
  };
  requestAnimationFrame(animateLoop);
};
const MovingDiv = ({ move, duration }) => {
  const [pos, setPos] = useState(0);
  useEffect(() => {
    animate({
      timing: fraction => move * fraction,
      draw: progress => setPos(progress),
      duration
    });
  }, []);
  return <div className="MovingDiv" style={{ left: pos }} />;
};

您也可以在计时功能中开始使用"轻松/宽松"来添加一些弹簧。.https://codesandbox.io/s/2w6wwwww8oymp