フェードイン・フェードアウトをcssのみで実装


フェードイン・フェードアウトは、JQueryで実装されていますが、cssアニメーションを含めたクラスの付け替えのみで行う方法がありましたので、投稿いたします。

事前知識

display: none; → display: block

この遷移をさせる要素に対して、transitionをかけることは、できません。
（transition: display 1s ease 0sの指定は動作しません。）

恐らく、レンダリングツリーからの削除が影響していると思われます。
（レンダリングにおいて、レンダリングツリーの生成・変更が先に行われてから、位置や色の調整が行われるため）

モーダルの表示・非表示

検索すると、opacityを使用してアニメーションを行う方法をよく見かけると思いますが、
opacity: 0だけでは、クリックできてしまいます。そこで、pointer-events: noneを使用してクリックを防ぎます。

.modal {
  pointer-events: none;
  position: fixed;
  opacity: 0;
  transition: opacity 1s ease 0s;
  z-index: 0; 
    &.is-active {
        opacity: 1;
        pointer-events: auto;

    }
}

あとは、表示させたい時に、is-activeクラスを付与、非表示にしたい時に、is-activeクラスを削除することで、アニメーションをしながら表示・非表示が可能になります。

スライドショーの表示・非表示

上記を応用することで、スライドショーをクラスの付け替えのみで作成することができます。


ul {
    position: relative;
    height: 100%; /* 場合によっては不要かも
 */
    li {
        opacity: 0;
        pointer-events: none;
        transition: opacity 1s ease 0s;
        position: absolute;
        z-index: 0;
        &.is-active {
            opacity: 1;
            pointer-events: auto;
            z-index: 1;
        }   
    }
    
}




active状態の要素のみz-indexを高めることで、表示させています。

jQueryでのモーダル

jQueryのfadeInメソッド・fadeOutメソッドでは、アニメーションの終了を待たずして、次々と処理が実行されていくため、
アニメーションが止まった後に処理を実行させるなどの対応が必要になります。
また、チラつきも起こることがあります。

懸念点

非表示コンテンツを使用しているため、スパムと捉えられてしまう可能性が考えられます。


所感

pointer-eventsプロパティ1つで問題を解決できたのは驚き。
pointer-eventsについての記述が少ないのが不思議