[CSS/JS]クラスの制御だけで要素の表示/非表示をアニメーションさせたい。でも非表示の時はクリック不可でトルツメもしたくないワガママなアナタへ
こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。
CSSのアニメーション、楽しいですよね。
最近はほとんどアニメーションの制御をCSSに任せてるぼくです。
そっちの方がパフォーマンスもいいしね。
でも想定外に煮詰まっちゃうこともしばしばあるのが、要素の表示/非表示アニメーションかなと思います。
CSSクラスのつけ外しだけで要素の表示非表示をアニメーションさせる。クリッカブルな要素だった場合は非表示の時はクリック不可にしたい。ついでに言うと非表示の時のエリアはトルツメもしたくない。
どんだけワガママなんじゃい！
と誰かに怒られそうですが、実際こういうケースはちょいちょいあると思います。
そんな時の解決法。
JSでアレコレする必要はございません。
もう結論から言ってしまいましょうか。
visibilityプロパティはtransition-propertyの対象なんだぜ！
これ知った時は目からウロコでした。
さっそくサンプルをば。
toggleボタンを押すことでターゲット（.target）クラスの付いた.itemボックス（aタグ＝クリッカブル要素）にis-visibleクラスをつけ外し出来ます。
どうです？
ボックスはaタグなので表示時にホバーするとカーソルがポインター表示になりますが、非表示の時はなりません。
当然クリックもできませんね。
そして非表示の時はトルツメにならないので、後続の要素の位置も変わったりしません。
該当コードを見てみましょう。
.target {
background: #ff0000;
visibility: hidden;
opacity: 0;
transition-property: opacity visibility;
transition-duration: 1s;
&.is-visible {
visibility: visible;
opacity: 1;
}
}
こんな感じで、visibility: hidden; / visibility: visible; に対して、transition-property: visibility; が効いちゃうわけなのです。
サンプルではアニメーションの時間を1秒に設定してますが、この設定をすると1秒後にvisibilityプロパティの値が変化する挙動になります。
あとはフェードアニメーション自体を opacity さんに頑張ってもらえれば、なななんと↑で言ったような
「CSSクラスのつけ外しだけで要素の表示非表示をアニメーションさせる。
クリッカブルな要素だった場合は非表示の時はクリック不可にしたい。
ついでに言うと非表示の時のエリアはトルツメもしたくない。」
という超絶ワガママがまかり通ってしまうという優れもの。
これ発見した人すごいなあ。尊敬しちゃう。
ちなみにiOS safariだとややバグっぽい挙動になるようで、それは↓の参考サイト様で解説されています。
今日も偉大な先人達に感謝。
