質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.62%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 941
退会済みユーザー

退会済みユーザー

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

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

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

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

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

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

<section>
  <select name="select" id="select">
    <option value="value1">値1</option>
    <option value="value2">値2</option>
    <option value="value3">値3</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;
    }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

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

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

1秒? 2秒?

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/15 13:51

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/09 17:26

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

    キャンセル

  • 2018/02/09 17:26

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

    キャンセル

  • 2018/02/09 17:27

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る