Jsにて画像のスライドショーを作りたい

前提・実現したいこと

JavaScriptでスライドショーを作成中、切り替わる全ての画像に対してcss aminationを反省させたい。

発生している問題

最初の一枚目しかcss aminationが反映しない

該当のソースコード

HTML
1<iDOCTYPE html>
2  <html lang="ja">
3    <head>
4      <title>real thing js-slideshow</title>
5      <meta charset="utf-8">
6      <link rel="stylesheet" href="css/styles.css">
7    </head>
8    <body>
9      <div id="back">
10        <h1>let's slideshow</h1>
11        <img id="slide-img" class="slider" src="img/aaa.jpg">
12      </div>
13        <script src="js/main.js"></script>
14    </body>
15  </html>

Js
1 const imgSrc = ['img/aaa.jpg', 
2                   'img/bbb.jpg',
3                   'img/ccc.png'];
4
5  let count = 0;
6  
7  setInterval(() => {
8     
9      if (count === 2) {
10        count = 0;
11      } else {
12        count++;
13      }
14     
15  document.getElementById("slide-img").src = imgSrc[count];
16    },5000);

css
1#back {
2  background-color: rgb(56, 56, 236);
3  height: 100vh;
4}
5h1 {
6  text-align: center;
7}
8#slide-img {
9  animation: fadeIn 2s ease .1s 1 normal;
10  max-width: 100%;
11  width: 800px;
12  text-align: center;
13  padding-top: 200px;
14  margin: auto;
15  display:block;
16}
17
18@keyframes fadeIn { 
19  0% {opacity: 0
20  } 
21  100% {opacity: 1
22  } 
23}

試したこと

定数のimgSrcをimgSrc.classLIst.add()でcssに反映させたりしましたがダメでした。

補足情報（FW/ツールのバージョンなど）

JavaScriptの知識が浅く、上記コードがどのような動きをしているかをしっかり分かっておりません。どなたかご教授いただけたら嬉しいです。

よろしくお願いいたします。

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

回答2件

ベストアンサー

友人に教えてもらいとりあえず解決しました。

投稿2021/12/07 03:27

退会済みユーザー

総合スコア0

kei344

2021/12/07 04:56

【質問をした後に自己解決してしまった --- ヘルプ｜teratail（テラテイル）】 https://teratail.com/help#resolve-myself > 後から読む人のためにも、具体的な解決手順を記載してください。

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

セレクタになっているID（#slide-img）をつけ外しすれば再度アニメーションが起きると思います。

投稿2021/11/29 07:58

Lhankor_Mhy

総合スコア36960

退会済みユーザー

2021/11/30 09:31

コメントありがとうございます！！下記のように変数imgSrcにクラスを付け外ししましたが、動作に変化はありませんでした。 setInterval(() => { if (count === 2) { count = 0; } else { count++; } document.getElementById('slide-img').src = imgSrc[count]; imgSrc.classList.toggle('picture'); },5000); cssは下記を追加しました。 #slide-img .picture { animation: fadeIn 2s ease .1s 1 normal; } コメントいただいた内容とやってることは違いますか？