Q&A
この程度のシンプルな変化であれば、CSS Transitionで解決するほうがいいかもしれません。
下記はd3jsを使用してdiv要素を360度回転させているのですが、最初の45度が一気に進んでしまいます。
なぜでしょうか？
javascript
1<html> 2<head> 3<script src="https://d3js.org/d3.v5.min.js"></script> 4<style> 5div{position: absolute;} 6</style> 7</head> 8<body> 9<div class="z" style="top:50;left:50;width:100;height:100;background-color:red"></div> 10<script> 11let deg=0; 12let id=setInterval(draw, 10); 13function draw() { 14 d3.select(".z").style("transform","rotate("+(deg++)+"deg)") 15 if(deg>360)clearInterval(id); 16} 17</script> 18</body> 19</html>
回答ありがとうございます。window.onload を試したのですが解消されませんでした。
chromeで試していたのですが、試しにfirefoxとedgeとie11で試したら正常に回転しました。
chromeだけの現象と言うことになりました。
ブラウザのロード時ではなく、下記のようにkeypressで実行させるとchromeでも正常に回転しました。
javascript
1d3.select("body").on("keypress", function() { 2 if(d3.event.keyCode==32){//spaceキー 3 deg=0; 4 id=setInterval(draw, 10); 5 } 6})
何か思いつくことありますか？
回答2件
0
そのコードて試してみましたが、0度から始まりましたよ。（単位抜けは修正しましたが）
読み込み時の実行のタイミングではないでしょうか。
下記を参考にHTMLや画像がすべて読み込まれた後で実行するようにすればどうでしょう。
投稿2020/09/17 03:54
編集2020/09/17 03:55
総合スコア33790
0
自分の環境でやってみましたが、問題は再現しませんでした。ブラウザの処理性能なども影響しているかもしれません。
（なお、<div>のstyleで単位が抜けていたので、そこは修正しました）
投稿2020/09/17 03:51
総合スコア145208
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。