表題について、簡単なことだと思うのですが、いつもJavaScriptは触らないためつまづいてしまいます。
ソースコードの目的は簡単で、
【隠しコンテンツだぜ!】
というコンテンツを、selectで値を選択し直した時に再表示させることです。
つまづいている所としては、1回目値を選択した時は、スムーズに移動しながらフェードインで表示がされるのですが、2回目以降選択した際に、もう一度同じように動いてくれません。
console.log("a");
console.log("b");
console.log("c");
とすると、ちゃんと順番にa,b,cと出力されるので、ますますよくわかりません。
みなさんからすると簡単な事かと思いますが、どうぞご教授のほど宜しくお願い致します。
html
1<section> 2 <select name="select" id="select"> 3 <option value="value1">値1</option> 4 <option value="value2">値2</option> 5 <option value="value3">値3</option> 6 </select> 7</section> 8 9<section> 10 <div id="aaa" class="aaa">隠しコンテンツだぜ!</div> 11 <div>コンテンツだぜ!</div> 12</section>
JavaScript
1var btn = document.getElementById( "btn" ); 2var a = document.getElementById( "aaa" ); 3var s = document.getElementById( "select" ); 4 5s.addEventListener( "change", function( e ){ 6 a.classList.remove( "ccc", "fadeIn" ); 7 a.classList.add( "ccc", "fadeIn" ); 8} );
css
1section{ 2 margin-bottom: 30px; 3} 4 5/**---- fadeIn ----**/ 6.aaa{ 7 display : none; 8 9 transition : all 1s 0s ease; 10} 11.ccc{ 12 /* animationプロパティにdisplayは使えないので、新しいクラスを作成しdisplayを設定する */ 13 display : block; 14 visibility : hidden; 15} 16.fadeIn{ 17 animation : FadeIn 1.5s; 18 19 /* アニメーション前後の状態を設定する */ 20 animation-fill-mode : both; 21} 22@keyframes FadeIn{ 23 0%{ 24 opacity : 0; 25 } 26 100%{ 27 opacity : 1; 28 visibility : visible; 29 30 /* animationの中でtransformを設定する/dispalyと一緒だとうまくいかない */ 31 transform : translate(50px, 0px); 32 } 33} 34/**---- fadeOut ----**/ 35.fadeOut{ 36 animation : FadeOut 1s; 37 38 /* アニメーション前後の状態を設定する */ 39 animation-fill-mode : both; 40} 41@keyframes FadeOut{ 42 0%{ 43 opacity : 1; 44 } 45 100%{ 46 opacity : 0; 47 } 48}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/02/15 04:51