Satoshi Murata

Micromodal.jsで開閉時のアニメーションをつける方法

Micromodal.js はWAI-ARIAのガイドラインに準拠した、軽量でアクセシブルなモーダルライブラリです。このmicromodalを使ってモーダルUIを実現するときに、どうやって開閉時のアニメーションをつけるのでしょうか。

一般的なプラクティスをイメージすると、display: none と display: block を付け替えるためのデフォルトのclass is-open に加え、もうひとつアニメーション用のclassを付与したいところです。

Micromodal.jsは、あらかじめ開閉時のアニメーション付与を考慮して、is-oepn の付け替えをCSSアニメーションの終了タイミングに合わせてくれるオプションが用意されています。

MicroModal.init({
  awaitOpenAnimation: true,
  awaitCloseAnimation: true,
});

アニメーション用のclassを追加することなく開閉時のアニメーションが可能となるため、煩雑になりがちなアニメーションのCSSをシンプルに書けるようになります。class付け替えのタイミングを意識せずに書けるのは便利ですね。

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

#Modal {
  &.is-open {
    display: block;
  }
  &[aria-hidden='false'] {
    animation: fadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
  }
  &[aria-hidden='true'] {
    animation: fadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
  }
}

関連記事