JavaScriptでクラス名がオン・オフされるタイミングについて

Question

質問内容

JavaScriptで、１つのタグにクラス名がオン・オフする方法として
今回試した方法より、よい方法がないか

追記
今回質問した「よい方法」というのは、「よりシンプルな方法」がないかというところです。
#hoge2を追加したりdelayをかけるなど、クラス名を付けはずしするだけなのに
余分な動作を追加してしまっていると感じています。その点に関して
何か他にシンプルな方法はないのかと思って質問しました。

前提

スライドショーのインジケーターを作成。
クラス名の付け外しで動くようにCSSを作成。
JavaScriptで、１つのタグにクラス名がオン・オフするように作成。
単純にオン・オフしてもうまくいかず、いくつかパターンを作成。

該当のソースコード

  <div id="slide_box">
    <div class="img_01 test" data-box="1">
      <img src="01.jpg" alt="">
    </div>
    <div class="img_02" data-box="2">
      <img src="02.jpg" alt="">
    </div>
    <div class="img_03" data-box="3">
      <img src="03.jpg" alt="">
    </div>
  </div>

  <div class="bar_div">
    <div id="hoge" class="bp"></div>
    <!-- <div id="hoge2" class=""></div> -->
  </div>

<style>
.bar_div {
  margin: auto;
    width:200px;
    aspect-ratio: 10 / 1;
    background-color:#ececec;
    position:relative;
    border-radius:10px;
    overflow: hidden;
}
.bp {
    position:absolute;
    height:100%;
    background-color:#FFCA28;
    animation: prog 2s normal;
    
}
@keyframes prog {
    0% {
			width: 0
		}
    100% {
			width: 100%
		}
}
</style>

  let auto_anime = function() {
    auto_set = setInterval(() => {
      if ( v < slide_max_count ) {
        $(".img_0" + v ).removeClass("test");
        $(".img_0" + ( v + 1 )).addClass("test");
        // $('#hoge').removeClass('bp');  パターン１うまく動かず
        // $('#hoge').addClass('bp');
        // $('#hoge').removeClass('bp');  パターン2  if分岐は省略
        // $('#hoge2').addClass('bp');
        $('#hoge').removeClass('bp').delay(100).queue(function(){ 
          $(this).addClass('bp').dequeue();
        });  //パターン3
        v++;
      }else {
        $(".img_01").addClass("test");
        $(".img_0" + slide_max_count ).removeClass("test");
        $('#hoge').removeClass('bp').delay(100).queue(function(){
            $(this).addClass('bp').dequeue();
        });
        v = 1;
      }
    }, 2000);
  };

試したこと

パターン１
シンプルに#hogeにクラス名を付け外しを行うも、CSSのアニメーションが動かず

パターン2
#hogeと#hoge2を作って、クラス名を交互に付ける　→　動く

パターン3
#hogeにクラス名を付ける時にdelayをかけてクラス名を付ける　→　動く

Comments

[maisumakun]

パターン2を実行したコードはありますか？あと、

> 今回試した方法より、よい方法がないか

どのような基準での「よい方法」でしょうか？

[mosamosadon88]

コメントありがとうございます。
なるほど、そうですね「よい方法」の定義があいまいですね。
パターン２もコードも含め、質問を修正いたします。

Answer 1

maisumakun さんのご回答の通りだと私も思うのですが、一応jQueryの範囲で解決するなら以下のように強制リフローを起こすのはいかがでしょうか。
かなりバッドノウハウ気味ですが。

$('#hoge').removeClass('bp').height()
$('#hoge').addClass('bp');

Comments

[mosamosadon88]

ご回答ありがとうございます。
なるほど、こんな方法もあるのですね。自分ではまったく思いつきませんでした。
推奨される方法ではないかもしれませんが、ひとつの方法として知識になりました。

Answer 2

JavaScriptから決まるタイミングにワンショットでアニメーションを実行するのであれば、CSSアニメーションよりjQueryの.animate()を使うほうが楽かと思います。

Comments

[mosamosadon88]

ご回答ありがとうございます。
そうですよね、クラス名でうまくいかない場合は、.animate()での解決するのがシンプルですよね。

Answer 3

ポイントが良くわからないのですが、特定の範囲内でクラスを定期的にローテーションするんですよね？
クラスの付替えのタイミングをずらしたいのか、ついたあとの挙動のタイミングをずらしたいのか、希望がどこなのかがよくわかりません。キーフレームアニメーションの場合例えば0%から30%まで要素の値をキープすればdelayできませんか？

的はずれな回答でしたら申し訳ないですが一応サンプル

<style>
.fuga{
width:100px;
height:50px;
margin:10px;
  background-Color:yellow;
}
.piyo{
   animation: prog 1s normal;
  background-Color:lime;
}
@keyframes prog {
  0% { width: 100px }
  30% { width: 100px }
  100% { width: 300px}
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  setInterval((function loop(){
    const cnt=document.querySelectorAll(`.fuga`).length;
    let idx=[...document.querySelectorAll(`.fuga`)].indexOf(document.querySelector(`.piyo`))+2;
    if(idx>cnt) idx=1;
    console.log(idx);
    if(document.querySelector(`.piyo`)) document.querySelector(`.piyo`).classList.remove('piyo');
    document.querySelector(`:nth-child(${idx} of .fuga)`).classList.add('piyo');
    return loop;
  })(),1000);
});
</script>
<div id="hoge">
<div class="fuga">1</div>
<div class="fuga">2</div>
<div class="fuga">3</div>
</div>

Comments

[mosamosadon88]

ご回答ありがとうございます。
今回の場合、CSSでアニメーションを発火させるのにクラス名のオン・オフで出来ないかやっていました。
単純にクラス名をオン・オフしただけだと、CSSアニメーションがうまく動かないといった状況でした。
それで、CSSアニメーションが動くようにクラス名を付けるのにdelayをかけたりとか、色々していた所でした。