アニメーションcssをjsの再起毎に実行したい

jsのanimeメソッドを３秒毎に再起させて1.pngと2.pngを交互に表示させています。
画像が変わると同時に毎度cssで下スライドさせたいのですが、最初の一回以降はclass「animeclass」を消して指定し直してもスライドされません。
画像が変わるたびにcssのアニメーションを実行したいのですが、どのようにすれば良いでしょうか？

html
1<head>
2    <meta charset="UTF-8">
3    <style>
4    img{
5        width:100%;
6    }
7    .animeclass{
8        margin-top:0px;
9        animation-name: anime;
10        animation-duration: 2s;
11    }
12    @keyframes anime
13    {
14        100% {
15            margin-top:200px;
16        }
17    }
18    </style>
19</head>
20<body>
21    <img src="1.png" id="img">
22</body>
23<script>
24        (function(){
25            var a = document.getElementById('img');
26            a.addEventListener('click',function(e){
27                var i = 0;
28                anime(e,i);
29            });
30        })();
31        var anime = (e,i)=>{
32            i = i==0?1:0;
33            e.path[0].setAttribute('src', imgArray[i]);//画像変更
34            e.path[0].setAttribute('class', 'animeclass');//アニメーションcssを割り当て
35            setTimeout(()=>{
36                e.path[0].removeAttribute('class');//クラス削除
37                anime(e,i);//再起
38            },3000);
39        }        
40        var imgArray = ["1.png","2.png"];
41    </script>

css側で３秒おきにアニメーションが繰り返される方法は時間とともにjsでの画像の切り替わりとcssのアニメーションにタイミングのズレが出たため、jsよりアニメーションを開始させたいのです。よろしくお願いします。

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

回答1件

ベストアンサー

正直私も検証して「なんでアニメーションしないのか」という原因はさっぱりわかりませんでしたが、対処法だけは検索した結果発見できました。

あなたのコードを極力変えずに済む魔法の対処法がこちらになります。

javascript
1setTimeout(()=>{
2  e.path[0].removeAttribute('class');//クラス削除
3  void e.path[0].offsetWidth; // ！！！！！魔法のおまじない！！！！！
4  anime(e,i);//再起
5},3000);