コンテンツを非表示してからの表示がうまくいかない

Question

表題について、簡単なことだと思うのですが、いつもJavaScriptは触らないためつまづいてしまいます。

ソースコードの目的は簡単で、

【隠しコンテンツだぜ！】

というコンテンツを、selectで値を選択し直した時に再表示させることです。
つまづいている所としては、１回目値を選択した時は、スムーズに移動しながらフェードインで表示がされるのですが、２回目以降選択した際に、もう一度同じように動いてくれません。

console.log("a");
console.log("b");
console.log("c");
とすると、ちゃんと順番にa,b,cと出力されるので、ますますよくわかりません。

みなさんからすると簡単な事かと思いますが、どうぞご教授のほど宜しくお願い致します。

<section>
  <select name="select" id="select">
    <option value="value1">値１</option>
    <option value="value2">値２</option>
    <option value="value3">値３</option>
  </select>
</section>

<section>
  <div id="aaa" class="aaa">隠しコンテンツだぜ！</div>
  <div>コンテンツだぜ！</div>
</section>

var btn = document.getElementById( "btn" );
var a = document.getElementById( "aaa" );
var s = document.getElementById( "select" );

s.addEventListener( "change", function( e ){
	a.classList.remove( "ccc", "fadeIn" );
	a.classList.add( "ccc", "fadeIn" );
} );

section{
    margin-bottom: 30px;
}

/**---- fadeIn ----**/
.aaa{
    display    : none;

    transition : all 1s 0s ease;
}
.ccc{
    /* animationプロパティにdisplayは使えないので、新しいクラスを作成しdisplayを設定する */
    display    : block;
    visibility : hidden;
}
.fadeIn{
    animation           : FadeIn 1.5s;

    /* アニメーション前後の状態を設定する */
    animation-fill-mode : both;
}
@keyframes FadeIn{
    0%{
        opacity : 0;
    }
    100%{
        opacity    : 1;
        visibility : visible;

        /* animationの中でtransformを設定する/dispalyと一緒だとうまくいかない */
        transform  : translate(50px, 0px);
    }
}
/**---- fadeOut ----**/
.fadeOut{
    animation           : FadeOut 1s;

    /* アニメーション前後の状態を設定する */
    animation-fill-mode : both;
}
@keyframes FadeOut{
    0%{
        opacity : 1;
    }
    100%{
        opacity : 0;
    }
}

Answer 1

    a.classList.remove( "ccc", "fadeIn" );
    a.classList.add( "ccc", "fadeIn" );

この部分、最初の行と次の行は実行に何秒程経っているかわかりますか？

1秒？ ２秒？

正解は0.001秒程度のことでしょう。
１００万ループの四則演算がほんの数秒で出来ますからね、
この書き方では人間には知覚出来ないでしょうね。

そうだ、ちゃんと１秒きっかり待たせればいいじゃん！
しかし、JavaScriptはシングルスレッドのプログラム、１箇所で停止するとページ全体が停止してしまいます。
なのでスリープみたいな事は出来ません。

そこで、1秒後にこの関数を実行してね、
こういう風に１秒後にしてほしい処理を包んだ関数をつくって、setTimeoutに投げ込んであげます。
このようにすれば多少質問文の意図通りになるかと思いますので試してみてください。

    a.classList.remove( "ccc", "fadeIn" );
    setTimeout(function(){
      a.classList.add( "ccc", "fadeIn" );
    }, 1000);

Comments

[退会済みユーザー]

ありがとうございます！！

Answer 2

fadeInをremoveしてから間がなくaddをしているためアクションが起こらなくなっています。
timeoutで少し時間をあけると良いかと思います。

s.addEventListener("change", function(e){
  a.classList.remove( "ccc", "fadeIn" );
  setTimeout(function(){
    a.classList.add( "ccc", "fadeIn" );
  }, 1);
});

Comments

[miyabi-sun]

setTimeoutはミリ秒なので1だと知覚できないです＞＜
仕様ではブラウザによって4ms制約みたいなのがあって1msではないらしいですが、
やっぱり駄目そうです！

[sho_jonas]

投稿タイミングが悪く同じ回答を記載してしまったので無視してもらってかまわないです。

[sho_jonas]

ブラウザごとにそんな仕様があったのですね。知らなかったです。勉強になります。