React를 사용하여 아날로그 시계를 만들었는데 초침에 문제가 생겼습니다. 초침은 시계 방향으로 시작하지만 59초 표시에 도달하면 1초 표시에 도달할 때까지 시계 반대 방향으로 움직입니다. 그 후 다시 시계방향으로 움직입니다. 시계 방향으로 연속적으로 움직이게 하려면 어떻게 해야 합니까?
CSS가 도움이 되는지 확실하지 않지만 여기에 있습니다.
목표를 달성하기 위해 CSS에 js를 삽입하려고 할 때 스타일이 지정된 구성 요소를 사용하여 몇 가지 이점을 얻고 한 단계 더 발전시켜 CSS에서 js 변수를 사용하는 것이 좋습니다
코드의 주요 제한은 애니메이션이 영원히 계속되도록 지정할 수 없어 360도에 도달하면 다시 시작되도록 지정할 수 없다는 것입니다
이는 CSS 키프레임 및 애니메이션을 통해 달성할 수 있지만 스타일이 지정된 구성 요소를 사용하지 않으면 루프를 완료하는 데 필요한 초기 각도 및 초와 같은 일부 필수 매개변수를 키프레임 및 애니메이션에 전달하기 어렵습니다.
으아악
https://codesandbox.io/s/dawn-rgb-qn58t6
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
목표를 달성하기 위해 CSS에 js를 삽입하려고 할 때 스타일이 지정된 구성 요소를 사용하여 몇 가지 이점을 얻고 한 단계 더 발전시켜 CSS에서 js 변수를 사용하는 것이 좋습니다
코드의 주요 제한은 애니메이션이 영원히 계속되도록 지정할 수 없어 360도에 도달하면 다시 시작되도록 지정할 수 없다는 것입니다
이는 CSS 키프레임 및 애니메이션을 통해 달성할 수 있지만 스타일이 지정된 구성 요소를 사용하지 않으면 루프를 완료하는 데 필요한 초기 각도 및 초와 같은 일부 필수 매개변수를 키프레임 및 애니메이션에 전달하기 어렵습니다.
구성요소의 스타일을 지정하는 방법은 대략 다음과 같습니다으아악
불필요한 논리를 삭제하고 추가한 내용에 대해 설명드리겠습니다키프레임은 애니메이션이 회전하는 방식(초기 회전에서 초기 회전 + 360까지)을 정의하고 애니메이션 속성과 함께 사용할 수도 있으므로 이를 달성하는 데 매우 중요합니다. 이는 ClockStick에 도움이 될 수 있습니다-
ClockStick은 초기 정도와 애니메이션이 루프를 완료하는 데 걸리는 시간(초)을 받는 스타일 구성 요소입니다-
사용자가 애플리케이션을 실행할 때 특정 시간에 해당하는 초기 등급의 상태만 선언했습니다-
그런 다음 각 스틱(ClockStick)이 루프를 완료하는 데 걸리는 시간(초)을 전달합니다(216000 => 시간, 3600 => 분, 60 => 초) -
결과입니다https://codesandbox.io/s/dawn-rgb-qn58t6
답변과 관련된 일부 링크