teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問html cssアニメーション @keyframes と javascript の複合についての質問

編集履歴

質問編集履歴

6

追加の質問

2020/10/08 15:35

投稿

vfxl9827
vfxl9827

スコア11

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,21 @@
16
16
 
17
17
 
18
18
 
19
-
19
+ **追加**　回答をいただいた各アニメーション終了後に以下の拡大縮小アニメーションを追加するにはどうすればよいでしょうか。後片付けで大変申し訳ございません
20
+
21
+ ```@keyframes anime1 {
22
+
23
+ from {
24
+
25
+ transform: scale(0.9,0.9);
26
+
27
+ }
28
+
29
+ to {
30
+
31
+ transform: scale(1,1);
32
+
33
+ ```
20
34
 
21
35
 
22
36
 

5

書式の改善とコードの転記ミスを修正。

2020/10/08 15:35

投稿

vfxl9827
vfxl9827

スコア11

test CHANGED
File without changes
test CHANGED
@@ -8,83 +8,169 @@
8
8
 
9
9
 
10
10
 
11
- 現状 >>> 3コマ目から7コマ目の移動には4,5,6コマと途中4回(1回1秒×4回=4秒かけて移動)ボタンクリック
11
+ **現状 >>> **0コマ目(初期状態)から4コマ目の移動には，1,2,3コマ目と途中4回(1回1秒×4回=4秒かけて移動)[送り]ボタンクリックする方式。
12
-
13
-
14
-
12
+
13
+
14
+
15
- 希望 >>> 3コマ目の状態から7コマ目をプルダウンで選択，実行で4,5,6コマを通過しながら(4秒間かけて)移動...再び別の番号まで移動
15
+ **希望 >>>** 各コマ数が書かれた[プルダウン]と[実行]ボタンを配置の上，0コマ目(初期状態)の状態からプルダウンで4コマ目へ移動という項目を選択，実行ボタンで1,2,3コマ目とアニメーションで通過しながら(通過時間1回1秒×4コマ=4秒間かけて)移動という方式にしたい。また再び別の番号の項目選択でそのコマ数まで移動
16
-
17
-
18
-
19
-
20
-
16
+
17
+
18
+
19
+
20
+
21
+
22
+
21
- ・・・・・・・・・・・・・・以下コード・・・・・・・・・・・・・・
23
+ ### html
24
+
22
-
25
+ ```
23
-
24
26
 
25
27
  <div class="parent">
26
28
 
27
- <span class="child" id="box">
29
+ <span class="child" id="box">
28
-
30
+
29
- <div style=" width:400px;height:400px; background-color: #999;">0コマ</div>
31
+ <div style=" width:400px;height:400px; background-color: #999;">0</div>
30
-
32
+
31
- <div style=" width:400px;height:400px; background-color: #555;">1コマ</div>
33
+ <div style=" width:400px;height:400px; background-color: #555;">1</div>
32
-
34
+
33
- <div style=" width:400px;height:400px; background-color: #999;">2コマ</div>
35
+ <div style=" width:400px;height:400px; background-color: #999;">2</div>
34
-
36
+
35
- <div style=" width:400px;height:400px; background-color: #555;">3コマ</div>
37
+ <div style=" width:400px;height:400px; background-color: #555;">3</div>
36
-
38
+
37
- <div style=" width:400px;height:400px; background-color: #999;">4コマ</div>
39
+ <div style=" width:400px;height:400px; background-color: #999;">4</div>
38
-
40
+
39
- <div style=" width:400px;height:400px; background-color: #555;">5コマ</div>
41
+ <div style=" width:400px;height:400px; background-color: #555;">5</div>
40
-
42
+
41
- <div style=" width:400px;height:400px; background-color: #999;">6コマ</div>
43
+ <div style=" width:400px;height:400px; background-color: #999;">6</div>
42
-
44
+
43
- <div style=" width:400px;height:400px; background-color: red;">7コマ</div>
45
+ <div style=" width:400px;height:400px; background-color: red;">7</div>
44
46
 
45
47
  </span>
46
48
 
47
49
  </div>
48
50
 
49
- <span style="position: relative; font-size: 20px;">
51
+
50
-
52
+
53
+
54
+
51
- <input type="button" onclick="move(1);" value=" ↑ " id="btn"/>
55
+ <input type="button" onclick="move(1);" value=" 送り " id="btn"/>
52
-
56
+
53
- <input type="button" onclick="move(2);" value=" ↓ " id="btn"/>
57
+ <input type="button" onclick="move(2);" value=" 戻し " id="btn"/>
58
+
54
-
59
+ ```
60
+
61
+ ### CSS
62
+
63
+ ```
64
+
65
+ div.parent {
66
+
67
+ position: relative;
68
+
69
+ width: 400px;
70
+
71
+ height: 400px;
72
+
73
+
74
+
75
+ border: 1px solid #ddd;
76
+
77
+ overflow: hidden;
78
+
79
+ }
80
+
81
+ span.child {
82
+
83
+ position: absolute;
84
+
85
+ width : 400px;
86
+
87
+ height: 3200px;
88
+
89
+ left: 0px;
90
+
91
+ top:0px;
92
+
93
+ animation-duration: 1s;
94
+
95
+ animation-iteration-count: 1;
96
+
97
+ animation-timing-function: linear;
98
+
99
+ animation-fill-mode: forwards;
100
+
101
+ }
102
+
103
+
104
+
105
+ @keyframes moveDown {
106
+
107
+
108
+
109
+ 100% {
110
+
111
+ transform:translateY(-400px);
112
+
113
+ }
114
+
115
+ }
116
+
117
+ @keyframes moveUp {
118
+
119
+
120
+
121
+ 100% {
122
+
123
+ transform:translateY(400px);
124
+
125
+ }
126
+
127
+ }
128
+
129
+
130
+
131
+ ```
132
+
133
+ ### JS
134
+
135
+ ```
136
+
137
+ var x, y; // box の座標
138
+
139
+
140
+
55
- </span>
141
+ // 移動 1=上, 2=下
56
-
57
-
58
-
59
- ////////////////////javascript//////////////////////
60
-
61
- var x, y;
62
142
 
63
143
  function move(direct) {
64
144
 
145
+
146
+
65
- const objBox = document.getElementById("box");
147
+ const objBox = document.getElementById("box");
66
-
148
+
67
- const cssStyle = window.getComputedStyle(objBox);
149
+ const cssStyle = window.getComputedStyle(objBox);
68
-
150
+
69
- y = parseInt(cssStyle.top.match(/(.*)px/)[1]);
151
+ y = parseInt(cssStyle.top.match(/(.*)px/)[1]);
70
-
152
+
153
+
154
+
71
- let anim = '';
155
+ let anim = '';
72
-
156
+
73
- switch (direct) {
157
+ switch (direct) {
74
-
158
+
75
- case 1: if (y >= -2400) { anim = 'moveDown'; } break;
159
+ case 1: if (y >= -2400) { anim = 'moveDown'; } break;
76
-
160
+
77
- case 2: if (y <= -400) { anim = 'moveUp'; } break;
161
+ case 2: if (y <= -400) { anim = 'moveUp'; } break;
78
-
162
+
79
- }
163
+ }
80
-
164
+
165
+
166
+
81
- if (anim !== '') {
167
+ if (anim !== '') {
82
-
168
+
83
- objBox.style.animationName = anim; // アニメ開始
169
+ objBox.style.animationName = anim; // アニメ開始
84
-
170
+
85
- btnsDisabled(true); // ボタン無効化
171
+ btnsDisabled(true); // ボタン無効化
86
-
172
+
87
- }
173
+ }
88
174
 
89
175
  }
90
176
 
@@ -92,88 +178,46 @@
92
178
 
93
179
  document.addEventListener('animationend', () => {
94
180
 
95
- const objBox = document.getElementById("box");
181
+ const objBox = document.getElementById("box");
96
-
182
+
97
- const cssStyle = window.getComputedStyle(objBox);
183
+ const cssStyle = window.getComputedStyle(objBox);
98
-
184
+
99
- const arr = cssStyle.transform.match(/((.*))/)[1].split(","); // 文字列 matrix(a, b, c, d, cx, cy) を分解
185
+ const arr = cssStyle.transform.match(/((.*))/)[1].split(","); // 文字列 matrix(a, b, c, d, cx, cy) を分解
186
+
100
-
187
+ y += parseInt(arr[5]); // transform.y の値を加える
188
+
189
+
190
+
101
- objBox.style.transform = ''; // アニメした transform を消す
191
+ objBox.style.transform = ''; // アニメした transform を消す
102
-
192
+
103
- objBox.style.top = y + 'px';
193
+ objBox.style.top = y + 'px';
104
-
194
+
105
- objBox.style.animationName = ''; // animationName を消す。こうしないと、次回に同じ方向のアニメが効かない。
195
+ objBox.style.animationName = ''; // animationName を消す。こうしないと、次回に同じ方向のアニメが効かない。
106
-
196
+
197
+
198
+
107
- btnsDisabled(false); // ボタン有効化
199
+ btnsDisabled(false); // ボタン有効化
108
200
 
109
201
  });
110
202
 
203
+
204
+
111
205
  // 矢印ボタンの有効化/無効化
112
206
 
113
207
  function btnsDisabled(arg) {
114
208
 
115
- let btns = document.getElementsByTagName("input");
209
+ let btns = document.getElementsByTagName("input");
116
-
210
+
117
- for (let i = 0; i < btns.length; i++) {
211
+ for (let i = 0; i < btns.length; i++) {
118
-
212
+
119
- btns[i].disabled = arg;
213
+ btns[i].disabled = arg;
120
-
214
+
121
- }
215
+ }
122
-
216
+
123
- }
217
+ }
124
-
125
-
126
-
127
- ////////////////////css//////////////////////
218
+
128
-
129
- div.parent {
219
+
130
-
131
- position: relative;
220
+
132
-
133
- width: 400px;
134
-
135
- height: 400px;
136
-
137
- border: 1px solid #ddd;
138
-
139
- overflow: hidden;
140
-
141
- }
221
+ ```
142
-
143
- span.child {
144
-
145
- position: absolute;
146
-
147
- width : 400px;
148
-
149
- height: 3200px;
150
-
151
- left: 0px;
152
-
153
-
154
-
155
- animation-duration: 1s;
156
-
157
- animation-iteration-count: 1;
158
-
159
- animation-timing-function: linear;
160
-
161
- animation-fill-mode: forwards;
162
-
163
- }
164
-
165
- @keyframes moveDown {
166
-
167
- 100% {transform:translateY(-400px);}
168
-
169
- }
170
-
171
- @keyframes moveUp {
172
-
173
- 100% {transform:translateY(400px);}
174
-
175
- }
176
-
177
-
178
222
 
179
223
  お手数をおかけしますが何卒よろしくお願い申し上げます。

4

2020/10/05 13:12

投稿

vfxl9827
vfxl9827

スコア11

test CHANGED
File without changes
test CHANGED
File without changes

3

2020/10/05 06:33

投稿

vfxl9827
vfxl9827

スコア11

test CHANGED
File without changes
test CHANGED
@@ -57,6 +57,8 @@
57
57
 
58
58
 
59
59
  ////////////////////javascript//////////////////////
60
+
61
+ var x, y;
60
62
 
61
63
  function move(direct) {
62
64
 

2

2020/10/05 06:32

投稿

vfxl9827
vfxl9827

スコア11

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
 
10
10
 
11
- 現状 >>> 3コマ目から7コマ目の移動には4回(1回1秒×4回=4秒かけて移動)ボタンクリック
11
+ 現状 >>> 3コマ目から7コマ目の移動には4,5,6コマと途中4回(1回1秒×4回=4秒かけて移動)ボタンクリック
12
12
 
13
13
 
14
14
 

1

2020/10/05 06:29

投稿

vfxl9827
vfxl9827

スコア11

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
 
14
14
 
15
- 希望 >>> 3コマ目の状態から7コマ目をプルダウンで選択，実行で(4秒間かけて)移動...再び別の番号まで移動
15
+ 希望 >>> 3コマ目の状態から7コマ目をプルダウンで選択，実行で4,5,6コマを通過しながら(4秒間かけて)移動...再び別の番号まで移動
16
16
 
17
17
 
18
18