Css 按下按钮时启动动画

我正在使用CSS运动路径

当按下按钮时，正方形将开始在路径上移动

我每次按下按钮都试图让它工作，但到目前为止没有成功

import React, { useState } from "react";
import styled from "styled-components";
import "./App.css";

const PathStyled = styled.div`
  width: 50px;
  height: 50px;
  border: 1px solid hsl(343, 100%, 58%, 0.3);
  border-right: 5px solid hsl(343, 100%, 58%);
  background: hsla(343, 100%, 58%, 0.3)
    radial-gradient(
      circle,
      hsl(343, 100%, 58%, 1) 3px,
      hsl(343, 100%, 58%, 0) 3px
    );
  offset-path: ${(props) => {
    const pathStr = "path('M40,100 l" + props.x + ",0')";
    console.log(pathStr);
    return pathStr;
  }};
  animation: distance 4000ms ease-in-out;
`;

function App() {
  const PATH_X_SEG = 200;
  const PATH_Y_SEG = 0;
  // const offSetPath
  const [path, setPath] = useState({ x: 200, y: 0 });
  const [isStartAnime,setIsStartAnime] = useState(false);
  const addToSVG = () => {
    setPath({ x: path.x + PATH_X_SEG, y: path.y + PATH_Y_SEG });
  };

  const startAnimation = () => {
    // if(isStartAnime) setIsStartAnime(false) doesn't work
    setIsStartAnime(true);
  };

  return (
    <div className="App">
      <div className="controls">
        <button onClick={addToSVG}>Add segment to SVG</button>
        <button onClick={startAnimation}>Start</button>
      </div>
      <br />
      <div className="section-style">
        <svg viewBox="0 0 700 700">
          <path
            d={`M40,100 l${path.x},${path.y}`}
            fill="none"
            stroke="lightgrey"
          />
        </svg>

        {isStartAnime ? <PathStyled x={path.x} y={path.y} /> : ''}
      </div>
    </div>
  );
}

export default App;

import React，{useState}来自“React”；
从“样式化组件”导入样式化；
导入“/App.css”；
const path styled=styled.div`
宽度：50px；
高度：50px；
边界：1px固体hsl（343100%，58%，0.3）；
右边框：5px实心hsl（343100%，58%）；
背景：hsla（343100%，58%，0.3）
径向梯度(
圆圈
hsl（343100%，58%，1）3倍，
hsl（343100%，58%，0）3px
);
偏移路径：${（道具）=>{
const pathStr=“路径（'M40100 l“+props.x+”，0'）”；
console.log（pathStr）；
返回路径str；
}};
动画：距离4000ms缓进缓出；
`;
函数App（）{
const PATH_X_SEG=200；
const PATH_Y_SEG=0；
//常数偏移路径
const[path，setPath]=useState（{x:200，y:0}）；
常量[isStartAnime，setIsStartAnime]=使用状态（false）；
常量addToSVG=（）=>{
setPath（{x:path.x+path_x_SEG，y:path.y+path_y_SEG}）；
};
常数startAnimation=（）=>{
//如果（isStartAnime）设置isStartAnime（false）不起作用
setIsStartAnime（真实）；
};
返回(
将段添加到SVG
开始


{isStartAnime？：''}
);
}
导出默认应用程序；

---

如何使它在每次按下时都能工作？

在您的情况下，您需要删除svg并再次渲染它

您禁用的行不起作用，因为您设置状态“isStartAnime”的方式太快。在这两行之间，React没有时间在没有svg的情况下渲染组件，并使用全新的svg再次渲染组件。这就是它不起作用的原因

相反，您可以检查以下代码：

const[isStartAnime，setIsStartAnime]=useState（false）；
const[reset，setReset]=useState（false）；
常数startAnimation=（）=>{
setIsStartAnime（假）；
设置重置（真）；
};
React.useffect（（）=>{
如果（！isStartAnime&&reset）设置isStartAnime（true）；
}，[isStartAnime，重置]；
返回(
...
);

在您的情况下，需要删除svg并再次渲染

您禁用的行不起作用，因为您设置状态“isStartAnime”的方式太快。在这两行之间，React没有时间在没有svg的情况下渲染组件，并使用全新的svg再次渲染组件。这就是它不起作用的原因

相反，您可以检查以下代码：

const[isStartAnime，setIsStartAnime]=useState（false）；
const[reset，setReset]=useState（false）；
常数startAnimation=（）=>{
setIsStartAnime（假）；
设置重置（真）；
};
React.useffect（（）=>{
如果（！isStartAnime&&reset）设置isStartAnime（true）；
}，[isStartAnime，重置]；
返回(
...
);