запускать анимацию при нажатии кнопки

Question

Я использую путь движения 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;

Пример того, как это выглядит и как работает

Как сделать так, чтобы она работала каждый раз при нажатии?

Answer 1

В вашем случае вам нужно удалить svg и отрендерить его снова.

Отключенная строка не работает, потому что вы слишком быстро устанавливаете состояние isStartAnime. Между этими двумя строками React не успевает отрендерить компонент без svg и отрендерить его снова с совершенно новым svg. Вот почему он не работает.

Вместо этого вы можете проверить код ниже:

  const [isStartAnime, setIsStartAnime] = useState(false);
  const [reset, setReset] = useState(false);

  const startAnimation = () => {
    setIsStartAnime(false);
    setReset(true);
  };

  React.useEffect(() => {
    if (!isStartAnime && reset) setIsStartAnime(true);
  }, [isStartAnime, reset]);

  return (
    ...
  );