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

  • Posted on
  • Category : 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を用いて設定されていないものを指定した際に警告を表示するようにしているので、そちらの方がしっくりくる場合はもともと紹介されているものを使用してください。

Back to Top

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

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

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。