84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
React を使用してアナログ時計を作成しましたが、秒針に問題があります。 秒針は時計回りに動き始めますが、59 秒のマークに達すると、1 秒のマークに達するまで反時計回りに動きます。その後、再び時計回りに動きます。時計回りに連続的に動かすにはどうすればよいでしょうか?
CSS が役立つかどうかはわかりませんが、ここにあります。
目標を達成するために CSS に JS を挿入しようとする場合は、スタイル付きコンポーネントを使用して利点を得るとともに、それを次のレベルに引き上げ、CSS で JS 変数を使用することをお勧めします。
これは CSS キーフレームとアニメーションを通じて実現できますが、スタイル付きコンポーネントを使用しないと、初期次数やループを完了するまでの秒数など、いくつかの必要なパラメーターをキーフレームやアニメーションに渡すのは困難です
これは、多かれ少なかれコンポーネントのスタイルを設定する方法です
不要なロジックをいくつか削除しました。追加した内容のいくつかを説明します
回答に関連するいくつかのリンク
https://styled-components.com/
目標を達成するために CSS に JS を挿入しようとする場合は、スタイル付きコンポーネントを使用して利点を得るとともに、それを次のレベルに引き上げ、CSS で JS 変数を使用することをお勧めします。
コードの主な制限は、アニメーションを永久に継続し、360 度に達したときに再開するように指定できないことです。これは CSS キーフレームとアニメーションを通じて実現できますが、スタイル付きコンポーネントを使用しないと、初期次数やループを完了するまでの秒数など、いくつかの必要なパラメーターをキーフレームやアニメーションに渡すのは困難です
これは、多かれ少なかれコンポーネントのスタイルを設定する方法です
リーリー不要なロジックをいくつか削除しました。追加した内容のいくつかを説明します
ClockStick は、初期度およびアニメーションがループを完了するまでにかかる秒数を受け取るスタイル コンポーネントです。- 私は、初期度がユーザーがアプリケーションを実行した特定の時間に対応する状態を宣言しただけです
- 次に、各スティック (ClockStick) がループを完了するのにかかる秒数を渡します (216000 => 時間、3600 => 分、60 => 秒)
-
これが結果です-
https://codesandbox.io/s/dawn-rgb-qn58t6回答に関連するいくつかのリンク
https://styled-components.com/