JavaScriptのスライドショーの切り替えをCSSでアニメーションをつけたけどうまくいきません

ボタンが押されるたびにCSSで画像をふわっと切り替えたい

JSでスライドショーを作っています
下記のコードでボタンが押されるたびに画像をふわっと変えたいのですが一度目のクリックしかCSSが有効になりません

試したこと

Classを消したりして見たのですが変わりません
どうすればクリックされるたびに画像をふわっと切り替えれますか？

HTML
1<div id='slider'>
2    <img src="img/img1.jpg" id='img_photo'>
3</div>
4
5<span id='front' class='play_btn'>
6<button type="button">▶</button>
7</span>
8
9<script>
10var i = 1;
11var slider = document.getElementById('slider');
12
13// 進むボタン
14document.getElementById('front').addEventListener('click', function(){
15    slider.classList.remove('slider');
16    slider.classList.add('slider');
17    var img = document.getElementById('img_photo');
18    if(i < 5 ){
19        i++;
20
21        img.src = 'img/img' + i + '.jpg';
22    } else {
23        i = 1;
24        img.src = 'img/img' + i + '.jpg';
25    }
26
27});
28
29</script>

CSSはこうしてます

CSS
1img{
2    width: 600px;
3    height: 400px;
4}
5
6.slider img{
7    animation-name: fade;
8    animation-duration: 3s;
9
10}
11
12
13
14@keyframes fade{
15    0%{
16        opacity: 0;
17    }
18    100%{
19        opacity: 1;
20    }
21}

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

回答1件

ベストアンサー

こうするとどうでしょうか。

js
1			slider.classList.remove('slider');
2			setTimeout(() => {
3				slider.classList.add('slider');
4				var img = document.getElementById('img_photo');
5				if (i < 5) {
6					i++;
7
8					img.src = 'http://placehold.jp/150x150.png?text=img' + i + '.jpg';
9				} else {
10					i = 1;
11					img.src = 'http://placehold.jp/150x150.png?text=img' + i + '.jpg';
12				}
13			}, 1);