[css + js]css側でフェードイン・アウトを構築する方法

.fadeIn()、.fadeOut()に頼らない方法。

やりたいこと

• 要素のフェードイン・アウトをしたい
• classをつけたり外したりを発火トリガーにしたい
• jsは切り替えだけにしたい
• 切り替えた際の動作はcssで完結したい

要するにjs側の負担を少なくしつつ、でも同じ感じにやりたい。

こうする

なんでもいいけどターゲットと発火用のボタンがあるとして。

<button id="trigger">発火用トリガー</button>
<div id="target"></div>

js（jQuery）はこう。

$(function(){
    $('#trigger').on('click',function(){
        $('#target').toggleClass('active');
    })
})

cssはこう。

#target{
    position: fixed;
    z-index: -1;
    opacity: 0;
    transition: opacity 1s;
}
#target.active{
    z-index: 100;
    opacity: 1;
}

フェードをopacityとtransitionでやっといて、z-indexで後ろに持っていく。

解説的なもの

まず、活用シーンとして適してるのはポップアップや画面端固定表示のコンテンツ。ページの上部に絶対位置指定で設置するタイプが合ってる。

opacity:0;にしても見えないだけで存在するので、例えばリンクを仕込んでたらクリックできるままになる。だからってdisplay:none;を使うとフェード機能を付けられない（めんどくさい）のでz-indexが必要になる。

.toggleFade()とかでいいじゃんってなるんだけど、レスポンシブとか考えると発火タイミングが増えたりPC・SPで表示の仕方が変わったりして、色々に対応する内容を書かなきゃいけないケースが出てくる事がある。絶対じゃないよ。そういうこともある。

js側でclassの付与だけすればいい、ってことができれば、cssだけで完結できれば、すごく楽になる。

そんな感じです。