アニメーションしない

以前からモーダル系の切り替えをする時におかしいなと思っていた部分がハッキリした話。発見があったので、メモ。以前からハンバーガーメニューをクリックすると、モーダルのように展開し、メニューを表示する形をよく採用していました。z-indexを組み合わせて最下層から上部にあげるように使っていたのですが、組み方が悪いのか、opacityのtransitionが発動しない時があったのです。先日もそこで悩んでいたのですが、具体的に書いてある記事を発見しました。そうか、displayを使うとtransitionしないのか。visibilityは昔、Dreamweaverが流行っていた頃に使っていたのを思い出したので、今度試してみようと思います。

CSS opacity:0、visibility:hidden、display:noneどれをアニメーションで使うべきか | nansystem

非表示にするCSSにはopacity:0、visibility:hidden、display:noneの3つがある。アコ…