Sassでフェード切り替えのmixinを作成する

以前に@starting-styleを使用する記事でフェードのアニメーションを実装しましたが、その実装をSassのmixinで使えるようにしてみます。

サンプルコード

mixinは以下の通りで、フェードの初期設定(非表示の状態)とフェードインの設定の2つ用意しています。

@mixin fade-init($duration: 0.3s, $easing: ease-out) {
  display: none;
  opacity: 0;
  transition:
    opacity $duration $easing,
    display $duration allow-discrete;
}

@mixin fade($display: block) {
  display: $display;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

以下のように使用します。

.sample {
  @include fade-init;

  &.is-open {
    @include fade;
  }
}

CSSは以下のように生成されます。

.sample {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-out, display 0.3s allow-discrete;
}
.sample.is-open {
  display: block;
  opacity: 1;
}
@starting-style {
  .sample.is-open {
    opacity: 0;
  }
}

フェードインで表示した際のdisplayをblock以外にしたい場合、引数で設定できます。

.sample {
  @include fade-init;

  &.is-open {
    @include fade(flex);
  }
}

CSSを生成すると、以下のように変更されました。

.sample {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-out, display 0.3s allow-discrete;
}
.sample.is-open {
  display: flex;
  opacity: 1;
}
@starting-style {
  .sample.is-open {
    opacity: 0;
  }
}