jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2015.2.13

transition要素の表示/非表示にはdisplayでなくvisibilityを使う

Category:
CSS
Tips

小ネタです。最近はアニメーションも含めた外観の演出をすべてCSSで制御し、そのフックのみJavaScriptで行うといったケースが増えてきました。

CSSのアニメーションでは個人的にはtransitionがシンプルで好きですが、fadeIn/Outで開閉するモーダルウインドウの実装をtransitionでやろうとして少しハマったので、その現象と解決策をメモしておきます。

要素を非表示にしたい場合に、opacity:0;を指定するだけでは透明になった要素にフォーカスできてしまいます。これを防ぐにはどうすればいいか。

display: none;を使うとtransitionのアニメーションが無効になる。

以下がそのサンプルです。

See the Pen Modal window - use display:none; by ykob (@ykob) on CodePen.

非表示要素にフォーカスされないようになっていますが、反面transitionでアニメーションさせたい演出も無効になり、ただclassを切り替えただけのようになっています。これでは十分とは言えません。

displayの代わりにvisibilityを使うと解決する。

解決したサンプルが以下になります。

See the Pen Modal window - not use display:none; by ykob (@ykob) on CodePen.

さきほどは無効になっていたアニメーションが有効になっています。
transitionでfadeIn/Outの演出を行いたい場合はvisibilityを使うようにしましょう。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.