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;
`;