0

eactでtimerコンポーネントの実装をしています。
+でtimerコンポーネントが1つ増え-ボタンでtimerコンポーネントを1つ減る物と作っています

したい事

+で増やしたtimerコンポーネントを増やす前に動いているアニメーションと同じ進行度にしたい

現在の問題

増やした時にタイマーの進行度が0から始まってしまう

App.tsx

import { useState } from "react";
import "./App.css";
import { Circle } from "./components/Circle";

function App() {
  const [count, setCount] = useState(0);
  const [circle, setCircle] = useState([]);
  //
  const OnClickAdd = () => {
    console.log("add");
    const newCircle: any = [
      ...circle,
      {
        count: setCount(count + 1),
      },
    ];
    setCircle(newCircle);
    console.log(circle);
  };
  //
  const onClickDelete = () => {
    console.log("delete");
    const newCircle = [...circle];
    newCircle.pop();
    setCircle(newCircle);
  };

  return (
    <>
      <button onClick={OnClickAdd}>+</button>
      <button onClick={onClickDelete}>-</button>
      <ul className='flex'>
        {circle.map((circle, index) => {
          return (
            <li>
              <Circle key={circle} />
            </li>
          );
        })}
      </ul>
    </>
  );
}

export default App;
Circle.tsx
import { StyledSVG, StyledCircle } from "./CircleStyle";

export const Circle = () => {
  return (
    <StyledSVG width='200' height='200'>
      <StyledCircle r='50' cx='100' cy='100' />
    </StyledSVG>
  );
};
StyledCircle.ts

import { keyframes } from "styled-components";
import styled from "styled-components";

export const StyledSVG = styled.svg`
  background: transparent;
  border-radius: 50%;
  transform: rotate(-90deg);
`;

export const FillUp = keyframes`
0% {
stroke-dasharray: 0 314;
}
100% {
stroke-dasharray: 314 314;
}
`;

export const StyledCircle = styled.circle`
  fill: none;
  stroke: pink;
  stroke-width: 100;
  stroke-dasharray: 0 314;
  animation: ${FillUp} 4s linear infinite;
`;

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。