1枚目の画像の時は動画のように、タイムラグなくリサイズされるのですが、
2枚目以降の画像の時にウインドウの大きさを変えると、
リサイズ中に隣の画像が表示されてしまいます。（タイムラグがある）

おそらくulのtransitionの設定（画像スライド時のアニメーション設定）が
リサイズ時にも有効になってしまっているためと思われます。
（コメントアウトすると1枚目の画像の時と同様に大丈夫になる）

これを改善（リサイズ時のみアニメーション無効に）しようとしたのですが上手くいきませんでした。
（最初よりタイムラグは少なくなったのですが、完全にはできず）

試した方法は
・transition: noneのクラスを作成し、リサイズイベント時にulにそのクラスを適用
・moveSlides関数を実行後、再度そのクラスを外す
以下、該当コード抜粋です。

CSS

.cancel{
  transition: none;
}

JS

 window.addEventListener('resize',() => {
    ul.classList.add('cancel');　//←無効化コード
    moveSlides();
    ul.classList.remove('cancel');　//←復活コード
  });

※復活コードをコメントアウトすると無効化できたが、
一度アニメ無効化されると以後無効のままです。

何がダメで、どのように実装すれば良いのでしょうか？
ご教授お願い致します。