回答編集履歴
1
調整
test
CHANGED
|
@@ -34,5 +34,66 @@
|
|
|
34
34
|
<p>box</p>
|
|
35
35
|
</div>
|
|
36
36
|
</div>
|
|
37
|
+
```
|
|
37
38
|
|
|
39
|
+
# transitionを使わない場合
|
|
40
|
+
仮にtransitionを使わないとしてどこまで使って良いのか・・・
|
|
41
|
+
translateはよいのか、absoluteしてtop/leftにするのか、margin-top/margin-leftならいいのか仕様調整が必要ですね
|
|
42
|
+
（課題であればこの辺の選択がセンスを試されるのでしょう）
|
|
43
|
+
移動中にリセットボタンを押した場合の挙動をどうするかなど課題はあります
|
|
44
|
+
またsetIntervalでは厳密な2秒の計測は難しく終了タイミングは2秒をちょっと超えます。
|
|
45
|
+
それとsetIntevalで単純に時間を分割して処理する場合スピードが一定になってしまうので、
|
|
46
|
+
加速度処理などを検討する場合はCSSに任せたほうが楽です。
|
|
47
|
+
```javascript
|
|
48
|
+
<style>
|
|
49
|
+
#box{
|
|
50
|
+
width:800px;
|
|
51
|
+
height:600px;
|
|
52
|
+
background-Color:gray;
|
|
53
|
+
}
|
|
54
|
+
#box p{
|
|
55
|
+
width:100px;
|
|
56
|
+
height:100px;
|
|
57
|
+
background-Color:red;
|
|
58
|
+
}
|
|
59
|
+
#debug{
|
|
60
|
+
position:fixed;
|
|
61
|
+
top:0;
|
|
62
|
+
right:0;
|
|
63
|
+
}
|
|
64
|
+
</style>
|
|
65
|
+
<script>
|
|
66
|
+
document.addEventListener('click',({target})=>{
|
|
67
|
+
const p=document.querySelector('#box p');
|
|
68
|
+
const msec=2000;
|
|
69
|
+
const delay=100; //nullにするとなめらか
|
|
70
|
+
const posX=500;
|
|
71
|
+
const posY=300;
|
|
72
|
+
if(target.matches('#box p:not(.move)')){
|
|
73
|
+
p.classList.add('move');
|
|
74
|
+
const start=new Date();
|
|
75
|
+
const timerId=setInterval(()=>{
|
|
76
|
+
const prog=new Date()-start;
|
|
77
|
+
debug.textContent=prog;// 経過時間を右上に表示
|
|
78
|
+
p.style.transform=`translate(${posX*prog/msec}px,${posY*prog/msec}px)`;
|
|
79
|
+
if(prog>=msec){
|
|
80
|
+
p.style.transform=`translate(${posX}px,${posY}px)`;
|
|
81
|
+
clearInterval(timerId);
|
|
82
|
+
}
|
|
83
|
+
},delay);
|
|
84
|
+
|
|
85
|
+
}
|
|
86
|
+
if(target.matches('#reset')){
|
|
87
|
+
p.classList.remove('move');
|
|
88
|
+
p.style.transform='translate(0px,0px)';
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
</script>
|
|
92
|
+
<div id="debug">-</div>
|
|
93
|
+
<div id="wrapper">
|
|
94
|
+
<button id="reset">リセット</button>
|
|
95
|
+
<div id="box">
|
|
96
|
+
<p>box</p>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
38
99
|
```
|