jQueryのaddClass()を使ってフェードインするのは難しくないですが、CSSのスタイルは意識しておかないと中途半端におかしな挙動になりかねません。
今回はaddClass()でフェードインする際の正しいやり方を解説します。
addClass()でフェードインする際の正しいやり方
jQueryはaddClass()でクラスを追加するだけです。ここは問題ないと思います。
$(function () {
$('.button').click(function () {
$('.element').addClass('is-fadein');
});
});
問題はCSSです。以下のように書きます。
/* 通常時 */
.element {
opacity: 0;
visibility: hidden;
transition: 300ms;
}
/* フェードイン時 */
.element.is-fadein {
opacity: 1;
visibility: visible;
}opacityとvisibilityの2つを使ってフェードインさせます。
たまにvisibilityを指定せずopacityだけでフェードインさせている記事がありますが、あれはよくないです。理由はopacityは要素を透過しますが、要素の判定が残っているからです。
例えばボタンクリック時に画面全体にモーダルを表示させたいとします。
opacityだけでフェードインさせようとすると、たとえ透過させてもモーダルの判定が画面全体に残っているので常に画面がクリックできない（クリックがモダールに吸われる）といった現象が発生します。常に透過されたモーダルしかクリックできないような状態ですね。
これはまずいので、visibility: hidden;を指定して要素の判定を消してあげる必要があるわけです。
フェードイン前の要素にはvisibility: hidden;を入れるのを忘れないようにしましょう。
transitionはフェードイン「前」のクラスに入れる
先ほどのCSSを再掲します。
/* 通常時 */
.element {
opacity: 0;
visibility: hidden;
transition: 300ms;/* ←ここ */
}
/* フェードイン時 */
.element.is-fadein {
opacity: 1;
visibility: visible;
}transitionはフェードイン時のクラスではなく、フェードインする「前」のクラスに入れましょう。
フェードイン時のクラスに入れるとうまくいかないので気をつけてください。
display: none;は指定しない
よくやりがちなのは「フェードインは最初は非表示にするからdisplay: none;を指定しよう」という間違いです。
以下はフェードインしない悪い例です。
/* 以下はフェードインしない */
/* 通常時 */
.element {
display: none;
transition: 300ms;
}
/* フェードイン時 */
.element.is-fadein {
display: block;
}display: none;からdisplay: block;にしてフェードインさせようとしてもパッと切り替わるだけでフェードインにはなりません。transitionをつけても同じくフェードインはしません。
フェードインはdisplayではなくopacityとvisibilityを使って処理します。
jQueryのfadein()とか使ってると「事前にdisplay: none;を指定しておきましょう」とか解説されるので、この辺がごっちゃになるとしんどいですね。
addClass()やtoggleClass()でフェードインをしたい場合はdisplay: none;はいらないと覚えておきましょう。
まとめ
addClass()やtoggleClass()を使ってフェードインさせることは難しくはないのですが、ごっちゃになってしまうポイントがいくつかあり、ハマると結構大変です。
自分も過去に何度かハマって頭を抱えていたので今回記事にまとめてみました。
大した処理ではないですが、きちんと書けるようになっておくといいですね。
