Sass:cubic-bezierを使った各種イージングの変数化にマップを用いる方法

Tips

Sass:cubic-bezierを使った各種イージングの変数化にマップを用いる方法

少し前にSassでcubic-bezierを使った各種イージングを変数化しておいて楽に指定できるようにする方法を備忘録として書いたのですが、マップを用いた使用方法を見かけたのでそちらの方法も備忘録兼ねて紹介します。

以下のイージング名やcubic-bezierの各値については、先日の「Sass:cubic-bezierを使った各種イージングを変数化しておき、簡単に指定できるようにする備忘録」のときと同様で「Easing Function 早見表」の内容を使用しており、それに加えease, linear, easeIn, easeOut, easeInOutも含めてあります。

$ease: (
  ease      : cubic-bezier(0.25, 0.1, 0.25, 1),
  linear    : cubic-bezier(0, 0, 1, 1),
  In        : cubic-bezier(0.42, 0, 1, 1),
  Out       : cubic-bezier(0, 0, 0.58, 1),
  InOut     : cubic-bezier(0.42, 0, 0.58, 1),

  InSine    : cubic-bezier(0.47, 0, 0.745, 0.715),
  OutSine   : cubic-bezier(0.39, 0.575, 0.565, 1),
  InOutSine : cubic-bezier(0.445, 0.05, 0.55, 0.95),
  InQuad    : cubic-bezier(0.55, 0.085, 0.68, 0.53),
  OutQuad   : cubic-bezier(0.25, 0.46, 0.45, 0.94),
  InOutQuad : cubic-bezier(0.455, 0.03, 0.515, 0.955),

  InCubic    : cubic-bezier(0.55, 0.055, 0.675, 0.19),
  OutCubic   : cubic-bezier(0.215, 0.61, 0.355, 1),
  InOutCubic : cubic-bezier(0.645, 0.045, 0.355, 1),
  InQuart    : cubic-bezier(0.895, 0.03, 0.685, 0.22),
  OutQuart   : cubic-bezier(0.165, 0.84, 0.44, 1),
  InOutQuart : cubic-bezier(0.77, 0, 0.175, 1),

  InQuint    : cubic-bezier(0.755, 0.05, 0.855, 0.06),
  OutQuint   : cubic-bezier(0.23, 1, 0.32, 1),
  InOutQuint : cubic-bezier(0.86, 0, 0.07, 1),
  InExpo     : cubic-bezier(0.95, 0.05, 0.795, 0.035),
  OutExpo    : cubic-bezier(0.19, 1, 0.22, 1),
  InOutExpo  : cubic-bezier(1, 0, 0, 1),

  InCirc     : cubic-bezier(0.6, 0.04, 0.98, 0.335),
  OutCirc    : cubic-bezier(0.075, 0.82, 0.165, 1),
  InOutCirc  : cubic-bezier(0.785, 0.135, 0.15, 0.86),
  InBack     : cubic-bezier(0.6, -0.28, 0.735, 0.045),
  OutBack    : cubic-bezier(0.175, 0.885, 0.32, 1.275),
  InOutBack  : cubic-bezier(0.68, -0.55, 0.265, 1.55)
);

@function ease($key: ease) {
  @if map-has-key($ease, $key) {
    @return map-get($ease, $key);
  }
  @return null;
}

使うときは下記のような形で記述し、下記はeaseInCubicを使用した例になります。

.elements {
  transition: all .5s ease(InCubic);
}

ちなみにデフォルトで$keyにはeaseが入るようにしているので、もしtransition: all .5s ease();のように記述した場合はease指定時のcubic-bezier(0.25, 0.1, 0.25, 1)の値が出力されるようになっています。

このマップを用いた方法は以下「CSS-Tricks」で紹介されていたのを参考にしており、こちらではデフォルト値は設定していなかったり@warnを用いて設定されていないものを指定した際に警告を表示するようにしているので、そちらの方がしっくりくる場合はもともと紹介されているものを使用してください。

Posted on

Category : Tips

Close the search window,
please press close button or esc key.