html cssアニメーション @keyframes と javascript の複合についての質問

以下は矢印ワンクリックで数字の書かれた1コマ(400*400px)ずつがスライドするのですが，これをセレクトボックスと実行ボタンで選択した番号コマまで自動で移動する方法をご教示ください。

**現状 >>> **0コマ目(初期状態)から4コマ目の移動には，1,2,3コマ目と途中4回(1回1秒×4回=4秒かけて移動)[送り]ボタンクリックする方式。

希望 >>> 各コマ数が書かれた[プルダウン]と[実行]ボタンを配置の上，0コマ目(初期状態)の状態からプルダウンで4コマ目へ移動という項目を選択，実行ボタンで1,2,3コマ目とアニメーションで通過しながら(通過時間1回1秒×4コマ=4秒間かけて)移動という方式にしたい。また再び別の番号の項目選択でそのコマ数まで移動

追加　回答をいただいた各アニメーション終了後に以下の拡大縮小アニメーションを追加するにはどうすればよいでしょうか。後片付けで大変申し訳ございません

  from {
    transform: scale(0.9,0.9);
  }
  to {
    transform: scale(1,1);

html

<div class="parent">
<span class="child" id="box">
<div style=" width:400px;height:400px; background-color: #999;">0</div>
<div style=" width:400px;height:400px; background-color: #555;">1</div>
<div style=" width:400px;height:400px; background-color: #999;">2</div>
<div style=" width:400px;height:400px; background-color: #555;">3</div>
<div style=" width:400px;height:400px; background-color: #999;">4</div>
<div style=" width:400px;height:400px; background-color: #555;">5</div>
<div style=" width:400px;height:400px; background-color: #999;">6</div>
<div style=" width:400px;height:400px; background-color: red;">7</div>
</span>
</div>


<input type="button" onclick="move(1);" value=" 送り " id="btn"/>
<input type="button" onclick="move(2);" value=" 戻し " id="btn"/>

CSS

div.parent {
    position: relative;
    width: 400px;
height: 400px;

    border: 1px solid #ddd;
    overflow: hidden;
}
span.child {
    position: absolute;
    width : 400px;
 height: 3200px;
    left: 0px;
top:0px;
    animation-duration: 1s;
    animation-iteration-count: 1;
animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes moveDown {

    100% {
        transform:translateY(-400px);
    }
}
@keyframes moveUp {

 100% {
        transform:translateY(400px);
    }
}

JS

var x, y;   // box の座標

// 移動   1=上, 2=下
function move(direct) {

    const objBox = document.getElementById("box");
    const cssStyle = window.getComputedStyle(objBox);
    y = parseInt(cssStyle.top.match(/(.*)px/)[1]);

    let anim = '';
    switch (direct) {
        case 1: if (y >= -2400) { anim = 'moveDown'; } break;
        case 2: if (y <= -400) { anim = 'moveUp'; } break;
    }

    if (anim !== '') {
        objBox.style.animationName = anim;  // アニメ開始
        btnsDisabled(true); // ボタン無効化
    }
}
// animation 終了時の処理
document.addEventListener('animationend', () => {
    const objBox = document.getElementById("box");
    const cssStyle = window.getComputedStyle(objBox);
    const arr = cssStyle.transform.match(/((.*))/)[1].split(",");     // 文字列 matrix(a, b, c, d, cx, cy) を分解
    y += parseInt(arr[5]);  // transform.y の値を加える

    objBox.style.transform = '';        // アニメした transform を消す
    objBox.style.top = y + 'px';
    objBox.style.animationName = '';    // animationName を消す。こうしないと、次回に同じ方向のアニメが効かない。

    btnsDisabled(false);    // ボタン有効化
});

// 矢印ボタンの有効化/無効化
function btnsDisabled(arg) {
    let btns = document.getElementsByTagName("input");
    for (let i = 0; i < btns.length; i++) {
        btns[i].disabled = arg;
    }
}

お手数をおかけしますが何卒よろしくお願い申し上げます。

kuma_kuma_

2020/10/04 23:19

スキップの場合アニメーションは必要ですか？また8画像で提示がありますが、これは固定でしょうか？

vfxl9827

2020/10/05 06:27

少し言葉足らずで申し訳ありませんでした。3コマ目から7コマ目に移動する間に4,5,6コマをスルスル通過していく感じです。8コマは固定でお願いします。コマの動きのイメージはスロットに近いです。スロットは一周回って戻ってきますがそれが戻ってこないで往復するイメージの感じが近いです。

kuma_kuma_

2020/10/05 07:06

質問者様の内容を再現すると @keyframes moveDown @keyframes moveUp 各7パターンで16パターン必要になりますけど... できるかな？あと質問のコードは「コードの挿入」を使って囲ってください

kuma_kuma_

2020/10/05 07:20

ちょっと待ったこれ正常に動いていないよね？コンボボックスとボタンもない... そこを直してくださいな...

vfxl9827

2020/10/05 09:57

ご親切にありがとうございます。すみません。まだなれないものでして。また後ほど修正してお知らせしますのでよろしくお願いします。

vfxl9827

2020/10/05 13:13

修正しました。ここからご教示お願い致します。

vfxl9827

2020/10/08 15:36

**追加**　回答をいただいた各アニメーション終了後に以下の拡大縮小アニメーションを追加するにはどうすればよいでしょうか。後片付けで大変申し訳ございません ```@keyframes anime1 { from { transform: scale(0.9,0.9); } to { transform: scale(1,1); ```

行動規範の内容に同意します

回答1件

ベストアンサー

なるべく原型をとどめる方向で調整しました。
変更部分はコメント残すようにしてるけど、
ここまでできるのになぜ質問したのかが不思議？

html
1<!DOCTYPE html>
2<html lang="ja" >
3<head>
4  <meta charset="UTF-8">
5  <title></title>
6</head>
7<body>
8<div class="parent">
9<span class="child" id="box">
10<div style=" width:400px;height:400px; background-color: #999;">0</div>
11<div style=" width:400px;height:400px; background-color: #555;">1</div>
12<div style=" width:400px;height:400px; background-color: #999;">2</div>
13<div style=" width:400px;height:400px; background-color: #555;">3</div>
14<div style=" width:400px;height:400px; background-color: #999;">4</div>
15<div style=" width:400px;height:400px; background-color: #555;">5</div>
16<div style=" width:400px;height:400px; background-color: #999;">6</div>
17<div style=" width:400px;height:400px; background-color: red;">7</div>
18</span>
19</div>
20<input type="button" onclick="move(1);" value=" 送り " id="btn1"/>
21<input type="button" onclick="move(2);" value=" 戻し " id="btn2"/>
22<select id="divno" onchange="selected();">
23<option value="0" selected>0ページ</option>
24<option value="1">1ページ</option>
25<option value="2">2ページ</option>
26<option value="3">3ページ</option>
27<option value="4">4ページ</option>
28<option value="5">5ページ</option>
29<option value="6">6ページ</option>
30<option value="7">7ページ</option>
31</select>
32</body>
33</html>

css
1div.parent {
2    position: relative;
3    width: 400px;
4	height: 400px;
5    border: 1px solid #ddd;
6    overflow: hidden;
7}
8span.child {
9    position: absolute;
10    width : 400px;
11	height: 3200px;
12    left: 0px;
13	top:0px;
14    /* animation-duration: 1s; */
15    animation-iteration-count: 1;
16	animation-timing-function: linear;
17    animation-fill-mode: forwards;
18}
19
20@keyframes moveDown { 100% { transform:translateY(-400px); }}
21@keyframes moveDown1 { 100% { transform:translateY(-400px); }}
22@keyframes moveDown2 { 100% { transform:translateY(-800px); }}
23@keyframes moveDown3 { 100% { transform:translateY(-1200px); }}
24@keyframes moveDown4 { 100% { transform:translateY(-1600px); }}
25@keyframes moveDown5 { 100% { transform:translateY(-2000px); }}
26@keyframes moveDown6 { 100% { transform:translateY(-2400px); }}
27@keyframes moveDown7 { 100% { transform:translateY(-2800px); }}
28@keyframes moveUp { 100% { transform:translateY(400px); } }
29@keyframes moveUp1 { 100% { transform:translateY(400px); } }
30@keyframes moveUp2 { 100% { transform:translateY(800px); } }
31@keyframes moveUp3 { 100% { transform:translateY(1200px); } }
32@keyframes moveUp4 { 100% { transform:translateY(1600px); } }
33@keyframes moveUp5 { 100% { transform:translateY(2000px); } }
34@keyframes moveUp6 { 100% { transform:translateY(2400px); } }
35@keyframes moveUp7 { 100% { transform:translateY(2800px); } }
36

javascript
1	var x, y;   // box の座標
2
3	// 移動   1=上, 2=下
4	function move(direct) {
5
6	    const objBox = document.getElementById("box");
7	    const cssStyle = window.getComputedStyle(objBox);
8	    y = parseInt(cssStyle.top.match(/(.*)px/)[1]);
9
10	    let anim = '';
11	    let divno = 0;	　// 変更後の表示位置
12	    switch (direct) {
13	        case 1: 
14	        	if (y >= -2400) {
15	        		anim = 'moveDown'; 
16					divno = ((y / -400) + 1);	　// 変更後の表示位置
17	        	}
18	        	break;
19	        case 2: 
20	        	if (y <= -400) {
21	        		anim = 'moveUp';
22					divno = ((y / -400) - 1);	　// 変更後の表示位置
23	        	}
24	        	break;
25	    }
26
27	    if (anim !== '') {
28			document.getElementById('divno').selectedIndex = divno;	// コンボボックスの値変更
29	    	objBox.style.animationDuration = '1s';		// アニメの実行速度設定
30	        objBox.style.animationName = anim;  // アニメ開始
31	        btnsDisabled(true); // ボタン無効化
32	    }
33	}
34
35	// コンボボックス変更時
36	function selected() {
37	    const objBox = document.getElementById("box");
38	    const cssStyle = window.getComputedStyle(objBox);
39	    y = parseInt(cssStyle.top.match(/(.*)px/)[1]);
40
41	    let anim = '';
42	    let divnofrom = (y / -400);　// 現在の表示位置
43	    let divnoto = document.getElementById('divno').selectedIndex;　// 移動先の表示位置
44		let move = 0;	// 移動距離
45		if (divnofrom < divnoto){
46			move = (divnoto - divnofrom);
47			anim = 'moveDown' + move;
48		}else if (divnofrom > divnoto){
49			move = (divnofrom - divnoto);
50			anim = 'moveUp' + move;
51		}
52
53	    if (anim !== '') {
54	    	objBox.style.animationDuration = move + 's';	// アニメの実行速度設定
55	        objBox.style.animationName = anim;  // アニメ開始
56	        btnsDisabled(true); // ボタン無効化
57	    }
58	}
59
60	// animation 終了時の処理
61	document.addEventListener('animationend', () => {
62	    const objBox = document.getElementById("box");
63	    const cssStyle = window.getComputedStyle(objBox);
64	    const arr = cssStyle.transform.match(/((.*))/)[1].split(",");     // 文字列 matrix(a, b, c, d, cx, cy) を分解
65	    y += parseInt(arr[5]);  // transform.y の値を加える
66
67	    objBox.style.transform = '';        // アニメした transform を消す
68	    objBox.style.top = y + 'px';
69	    objBox.style.animationName = '';    // animationName を消す。こうしないと、次回に同じ方向のアニメが効かない。
70
71	    btnsDisabled(false);    // ボタン有効化
72	});
73
74	// 矢印ボタンの有効化/無効化
75	function btnsDisabled(arg) {
76	    let btns = document.getElementsByTagName("input");
77	    for (let i = 0; i < btns.length; i++) {
78	        btns[i].disabled = arg;
79	    }
80	    document.getElementById('divno').disabled = arg;	// コンボボックス
81	}