制作のご相談はこちら
cssのopacityとtransitionを使ってふわっと表示させる方法

公開日 : 2018年02月07日 / 最終更新日 : 2018年11月05日

cssのopacityとtransitionを使ってふわっと表示させる方法


ある何かをクリックした際に別の何かを表示させるという場合が多々あると思います。
その時に使えるソースコードを紹介します。

プラス、ふわっと表示・非表示を繰り返すフェードイン、フェードアウトの動きを加えています。

opacityとtransitionを使う

今回最終的に完成させたい動きを文章にするとこうなります。
buttonをクリックすると、.text_boxの中身をふわっと表示・非表示を繰り返す

こうやって完成形の動きを文章にすると、思い通りのコードに近づくことが出来ます。
そして完成したソースコードはこちらです。

transitionでアニメーションの時間制御をしています。
0.5の部分はスピードの値なので、数字を変えると変化するスピードを調整できます。

javascriptの書いている内容の流れはこうです。
ボタンをクリックする→
→.text_boxに.openのクラスが付与されているか?
→付与されていたら、.text_boxの.openを削除する(.openのcssが適用されない)
→付与されていなかったら、.text_boxの.openを付与する(.openのcssが適用される)