リサイズ中に隣の画像が表示されてしまいます

対処法について説明していきます。
2021年8月21日
ユーザー

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

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

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

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

CSS

.cancel{
  transition: none;
}

JS

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

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

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

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?

このレッスンの質問と回答(9)