質問編集履歴
2
学習を進めた結果を追加。質問点の具体化。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -38,13 +38,41 @@
|
|
|
38
38
|
|
|
39
39
|
探した結果として、
|
|
40
40
|
|
|
41
|
-
Javascriptを利用して
|
|
41
|
+
Javascriptを利用してロード時に
|
|
42
42
|
|
|
43
43
|
style属性に代入するのかと思いましたが、
|
|
44
44
|
|
|
45
45
|
具体的な書き方が分からず、また合っているか分からないため
|
|
46
46
|
|
|
47
47
|
ここに質問しました。
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
質問した結果、
|
|
52
|
+
|
|
53
|
+
Javascriptを利用したロード時のstyle属性で
|
|
54
|
+
|
|
55
|
+
方向性が合っていそうなので
|
|
56
|
+
|
|
57
|
+
Javascriptのコードを書きました。
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
発想は、ページロード時に
|
|
62
|
+
|
|
63
|
+
①現在のtransformの値を取得して、
|
|
64
|
+
|
|
65
|
+
②translateXの値に200pxを加算
|
|
66
|
+
|
|
67
|
+
です。
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
①はできました。「matrix(1, 0, 0, 1, -100, 50)」。
|
|
72
|
+
|
|
73
|
+
②が分からなく、どのようなコードを書けば、
|
|
74
|
+
|
|
75
|
+
①で取得した値のtranslateXに加算できるのでしょうか。
|
|
48
76
|
|
|
49
77
|
|
|
50
78
|
|
|
@@ -58,7 +86,7 @@
|
|
|
58
86
|
|
|
59
87
|
<section>
|
|
60
88
|
|
|
61
|
-
<div
|
|
89
|
+
<div id="node1">みどり</div>
|
|
62
90
|
|
|
63
91
|
</section>
|
|
64
92
|
|
|
@@ -68,7 +96,7 @@
|
|
|
68
96
|
|
|
69
97
|
```css
|
|
70
98
|
|
|
71
|
-
|
|
99
|
+
#node1 {
|
|
72
100
|
|
|
73
101
|
animation: anm1 10s;
|
|
74
102
|
|
|
@@ -93,3 +121,25 @@
|
|
|
93
121
|
}
|
|
94
122
|
|
|
95
123
|
```
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
```javascript
|
|
128
|
+
|
|
129
|
+
<script>
|
|
130
|
+
|
|
131
|
+
let box = document.getElementById("anm1");
|
|
132
|
+
|
|
133
|
+
let get_original_value = window.getComputedStyle(box, null).getPropertyValue('transform');
|
|
134
|
+
|
|
135
|
+
alert(get_original_value);
|
|
136
|
+
|
|
137
|
+
box.style.transform = 'translateX(200px)';
|
|
138
|
+
|
|
139
|
+
</script>
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
matrix(1, 0, 0, 1, -100, 50)
|
|
144
|
+
|
|
145
|
+
```
|
1
自分で探した解決方法の追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -33,6 +33,18 @@
|
|
|
33
33
|
|
|
34
34
|
|
|
35
35
|
の挙動をする実装方法をここ数日、探しております。
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
探した結果として、
|
|
40
|
+
|
|
41
|
+
Javascriptを利用してリロード時に
|
|
42
|
+
|
|
43
|
+
style属性に代入するのかと思いましたが、
|
|
44
|
+
|
|
45
|
+
具体的な書き方が分からず、また合っているか分からないため
|
|
46
|
+
|
|
47
|
+
ここに質問しました。
|
|
36
48
|
|
|
37
49
|
|
|
38
50
|
|