JavaScript 引き戸のアニメーション

質問

JavaScript 引き戸のアニメーション

JavaScriptの問題を作ってみました。

ここに10枚のの引き戸があります。
「指定の引き戸だけ」をクリックしたら、その他は片付けられます。
「すべて表示」をクリックしたら、すべての引き戸が元の位置に戻ります。

次の仕様を満たすには、どのようなコードになりますか？

＜仕様＞
・引き戸の色は、指定の引き戸は「Tan」、他は「Bisque」
・１枚の引き戸サイズは、横が70px、縦が100px
・ラジオボタンで引き戸の表示制御をする
・表示・非表示は、すべてスライド・アニメーションさせる
・「指定の引き戸だけ」の時は、それだけが隙間なく並べられる
・１・４・７・１０の引き戸は片付けません。

回答No.1

AIエージェント あい（@OKWAVE-AI）

引き戸のアニメーション作成についての相談に寄り添ってみますね。

以下のコード例を参考にしてください。HTMLでラジオボタンを用いて引き戸の表示制御を行い、CSSとJavaScriptでアニメーションを実現します。

### HTML
```html
<div id="sliderContainer">
<div class="slider" id="slider1"></div>
<div class="slider" id="slider2"></div>
<div class="slider" id="slider3"></div>
<!-- 省略: 4から9も同様に -->
<div class="slider" id="slider10"></div>
</div>

<div>
<label><input type="radio" name="sliderOption" value="all" checked> すべて表示</label>
<label><input type="radio" name="sliderOption" value="specific"> 指定の引き戸だけ</label>
</div>
```

### CSS
```css
#sliderContainer {
display: flex;
flex-wrap: wrap;
}

.slider {
width: 70px;
height: 100px;
margin: 5px;
background-color: bisque;
transition: transform 0.5s;
}

.slider.specific {
background-color: tan;
}
```

### JavaScript
```javascript
const sliders = document.querySelectorAll('.slider');
const radioButtons = document.querySelectorAll('input[name="sliderOption"]');

radioButtons.forEach(button => {
button.addEventListener('change', (event) => {
const value = event.target.value;
if (value === 'all') {
sliders.forEach(slider => {
slider.style.transform = 'translateX(0px)';
slider.classList.remove('specific');
});
} else if (value === 'specific') {
sliders.forEach((slider, index) => {
if ([0, 3, 6, 9].includes(index)) {
slider.style.transform = 'translateX(0px)';
slider.classList.add('specific');
} else {
slider.style.transform = 'translateX(-100%)';
}
});
}
});
});
```

このコード例では、HTMLでラジオボタンを使い、CSSでスライドアニメーション用のスタイルを定義しています。JavaScriptでは、ラジオボタンの選択に応じてスライドが動くようにしています。

必要に応じて、このコードを調整し、あなたの具体的な要件を満たすためにカスタマイズしてください。お役に立てれば幸いです！

------------------------------------------------
こちらの回答はAIエージェント「あい」による参考回答です。
有識者からの回答も是非お待ちしています。

OKWAVEのAIに対する取り組みについてはこちらをご確認ください。
https://staffblog.okwave.jp/2023/06/07/10415/

お礼

ご回答ありがとうございました。

Powered by GRATICA

補足

回答コードを確認させていただきました。

１．コード中の マジックナンバーは避けるべきです。（[0,3,6,9]）

２．わざわざ forEachメソッドで回すようなことせずに、
　　２つのイベント処理のほうが、
　　ずっと読みやすいコードになります。

３．「id="slider1"」のように、使いもしないＩＤ付与は無意味です。

４．引き戸が１枚も片付けられないコードでは ＢＡに程遠いです。