この記事は2018年2月7日に書かれたもので、内容が古い可能性がありますのでご注意ください。
ある何かをクリックした際に別の何かを表示させるという場合が多々あると思います。
その時に使えるソースコードを紹介します。
プラス、ふわっと表示・非表示を繰り返すフェードイン、フェードアウトの動きを加えています。
opacityとtransitionを使う
今回最終的に完成させたい動きを文章にするとこうなります。
buttonをクリックすると、.text_boxの中身をふわっと表示・非表示を繰り返す
こうやって完成形の動きを文章にすると、思い通りのコードに近づくことが出来ます。
そして完成したソースコードはこちらです。
transitionでアニメーションの時間制御をしています。
0.5の部分はスピードの値なので、数字を変えると変化するスピードを調整できます。
javascriptの書いている内容の流れはこうです。
ボタンをクリックする→
→.text_boxに.openのクラスが付与されているか?
→付与されていたら、.text_boxの.openを削除する(.openのcssが適用されない)
→付与されていなかったら、.text_boxの.openを付与する(.openのcssが適用される)