改良版のopacityとvisibilityとtransitionでフェードイン・フェードアウト
以前記事にしたものの改良版になります。
上の記事では、レイアウトが残っている状態ですが、heightを0にすることでレイアウトも消えるように、フェードアウトさせています。
クリックイベントはJavaScriptで処理しています。
フェードイン・フェードアウトの動作サンプル
↓の色がついているところをクリックすると動作します。
triggerクラスをクリックすると、hideクラスがshowに変わる。
showクラスがついている場合は、triggerクラスをクリックすると、showがhideに変わる。
ソースコード
HTML
<div class="trigger">
このラベルをクリック（trigger）
</div>
<div class="contents hide">
<div>
triggerをクリックすると表示される(hide ⇒ show)
triggerをクリックすると消える(show ⇒ hide)
</div>
</div>
CSS
.contents {
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
padding: .5rem;
margin-top: .5rem;
}
.hide {
opacity: 0;
visibility: hidden;
transition: 1s;
padding-top: 0;
padding-bottom:0;
height: 0;
overflow: hidden;
margin: 0;
}
.show{
opacity: 1;
visibility: visible;
transition: 1s;
}
.trigger{
background-color: #bdd4ff;
}
JavaScript
const trigger = document.querySelector('.trigger');
const target = document.querySelector('.hide');
trigger.addEventListener('click', () => {
target.classList.toggle('hide');
target.classList.toggle('show');
}, false);
ソースコードの説明
tiggerクラスにはJavaScriptで、クリックされた時にhideとshowのクラスを入れ替える設定がしてあります。
表示・非表示のアニメーションはCSSで記述しています。
hideクラスが初期状態になります。透明度 0、visibilityをhidden、height 0、margin 0として、paddingは上下だけ0にしています。
contentsクラスには見た目の設定をしています。hideクラスで打ち消されていないpaddingの左右が生きている形なので、上から下に出てくるときに、横要素のアニメーションが反映されず、まっすぐに下に出てくるような挙動になります。
showクラスになると、アニメーションが1秒で反映され、visibilityとopacityが表示状態になります。
スタイルシートの見た目設定は、もう少し他の方法もあるかな～という感じがします。
色々設定を変えてみるのも良いかと思います。
まとめ
heightを0にするアニメーションなのですが、なんかchromeで動作させるとちょっとがくがく揺れてるんですよね。
この揺れがきになってしまって、別のサイトを作っていた時に結局採用したのはjQueryでの実装でした。
HTML・CSSでのフェードイン・フェードアウトを調べている過程で、実際に試したものをメモっておきたくて備忘録的に記事にしてみました。
その時の環境で制限があったりするので、いろんな選択肢を持っておきたいな～と思います。