質問編集履歴
2
学習を進めた結果を追加。質問点の具体化。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -18,22 +18,36 @@
|
|
|
18
18
|
の挙動をする実装方法をここ数日、探しております。
|
|
19
19
|
|
|
20
20
|
探した結果として、
|
|
21
|
-
Javascriptを利用して
|
|
21
|
+
Javascriptを利用してロード時に
|
|
22
22
|
style属性に代入するのかと思いましたが、
|
|
23
23
|
具体的な書き方が分からず、また合っているか分からないため
|
|
24
24
|
ここに質問しました。
|
|
25
25
|
|
|
26
|
+
質問した結果、
|
|
27
|
+
Javascriptを利用したロード時のstyle属性で
|
|
28
|
+
方向性が合っていそうなので
|
|
29
|
+
Javascriptのコードを書きました。
|
|
30
|
+
|
|
31
|
+
発想は、ページロード時に
|
|
32
|
+
①現在のtransformの値を取得して、
|
|
33
|
+
②translateXの値に200pxを加算
|
|
34
|
+
です。
|
|
35
|
+
|
|
36
|
+
①はできました。「matrix(1, 0, 0, 1, -100, 50)」。
|
|
37
|
+
②が分からなく、どのようなコードを書けば、
|
|
38
|
+
①で取得した値のtranslateXに加算できるのでしょうか。
|
|
39
|
+
|
|
26
40
|
アドバイスをいただけないでしょうか。
|
|
27
41
|
よろしくお願い致します。
|
|
28
42
|
|
|
29
43
|
```html
|
|
30
44
|
<section>
|
|
31
|
-
<div
|
|
45
|
+
<div id="node1">みどり</div>
|
|
32
46
|
</section>
|
|
33
47
|
```
|
|
34
48
|
|
|
35
49
|
```css
|
|
36
|
-
|
|
50
|
+
#node1 {
|
|
37
51
|
animation: anm1 10s;
|
|
38
52
|
animation-iteration-count:infinite;
|
|
39
53
|
}
|
|
@@ -45,4 +59,15 @@
|
|
|
45
59
|
transform: translate(1000px,50px);
|
|
46
60
|
}
|
|
47
61
|
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
```javascript
|
|
65
|
+
<script>
|
|
66
|
+
let box = document.getElementById("anm1");
|
|
67
|
+
let get_original_value = window.getComputedStyle(box, null).getPropertyValue('transform');
|
|
68
|
+
alert(get_original_value);
|
|
69
|
+
box.style.transform = 'translateX(200px)';
|
|
70
|
+
</script>
|
|
71
|
+
|
|
72
|
+
matrix(1, 0, 0, 1, -100, 50)
|
|
48
73
|
```
|
1
自分で探した解決方法の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -17,6 +17,12 @@
|
|
|
17
17
|
|
|
18
18
|
の挙動をする実装方法をここ数日、探しております。
|
|
19
19
|
|
|
20
|
+
探した結果として、
|
|
21
|
+
Javascriptを利用してリロード時に
|
|
22
|
+
style属性に代入するのかと思いましたが、
|
|
23
|
+
具体的な書き方が分からず、また合っているか分からないため
|
|
24
|
+
ここに質問しました。
|
|
25
|
+
|
|
20
26
|
アドバイスをいただけないでしょうか。
|
|
21
27
|
よろしくお願い致します。
|
|
22
28
|
|