【CSS】display: none、blockの切り替えでoacityが効かない！？要素を確実にフェードインで表示する方法

こんにちは、Ryohei（@ityryohei）です！

本記事では、CSSのdisplay:none・blockで表示を切り替えた際にopacityを設定しているにも関わらずフェードインで表示されない場合の対処方法をご紹介しています。

CSSで要素の表示を切り替える手法として、一般的には「display」を使用するかと思います。それにプラスして、フェードインアニメーションを追加する場合は「opacity」の値を調整して実現します。

ただ、displayを切り替えるclassを定義してclassをトグルする場合、上記の方法ですとうまくフェードインで表示されないケースがあります。その場合は本記事でご紹介している内容を試していただければと思います。

では、解説していきます。

結論：keyframesのanimationを使用しましょう

冒頭でお話しした通り「display: block, none」と「opacity」を組み合わせた際に「opacity」がうまく機能しない場合があります。DOMの構築上仕方がない部分ですので、そういった場合は「keyframes」と「animation」でフェードインアニメーションを実装していきます。

失敗例

まずは失敗例から。

HTML

<div id="app">
    <a class="btn" href="#">切り替える</a>
    <div class="element">
        Show element!
    </div>
</div>

SCSS

.element {
    display: none;
    padding: 20px;
    text-align: center;
    color: #a8aabc;
    border: 1px solid #a8aabc;
    opacity: 0;
    transition: .5s;


    &.show {
        display: block;
        opacity: 1;
    }
}

上記をご覧いただいてわかる通り、「element」の要素に「display: none」と「opacyty: 0」を定義し「show」というclassが追加された場合にどちらも有効になるようにしています。

（スクリプトは「show」をtoggleClass()しているだけですので、省略しております。）

下記のデモにあります「切り替える」と記載されたボタンをクリックしてみてください。ボタンをクリックすると、「element」は表示されますが「opacity」が機能していないことがお分かりいただけるかと思います。

See the Pen
Display Block None Opacity1｜CSS by ryohei (@intotheprogram)
on CodePen.

成功例

続いて成功例のご紹介です。「transition」によるアニメーションから「keyframes」と「animation」による組み合わせに変更しています。

HTML

<div id="app">
    <a class="btn" href="#">切り替える</a>
    <div class="element">
        Show element!
    </div>
</div>

SCSS

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.element {
    display: none;
    padding: 20px;
    text-align: center;
    color: #a8aabc;
    border: 1px solid #a8aabc;
        
    &.show {
        display: block;
        animation-name: fade-in;
        animation-duration: .5s;
    }
}

下記は成功例でご紹介しているCSSで作成したデモになります。「opacity」が機能していることがお分かりいただけるかと思います。

See the Pen
Display Block None Opacity2｜CSS by ryohei (@intotheprogram)
on CodePen.