【CSS】transitionの使い方

CSSのtransition属性。使い方をきちんと理解していなくて毎回毎回調べているので、 今回は小手先ではなくきちんと調べたのものを備忘録としてまとめます。

transitionの基本

transitionは要素を変化させるときに時間差をつけるなど、2つの状態間の定義をするためのプロパティです。

例えば、 opacity: 0 で見えなくしていた要素をクリックで表示させる時などに使うと、 ふわっと出てくるような表現が可能になります。

.selector {
	visibility: hidden;
	opacity: 0;
	transition: all .3s;

	&:hover {
		visibility: visible;
		opacity: 1;
	}
}

上記のように使用します。

マウスオーバーした時に非表示にしていた要素がふわっと出現します。

transitionの仕様

transitionは:hoverなどの擬似要素や、JavaScriptによるクラスの着脱などで、要素を動的に変化させる時に設定します。

以下のプロパティを一括で指定することができます

• transition-property / transitionの対象となるプロパティ
• transition-duration / 変化開始から終了までの時間
• transition-timing-function / 変化の度合い
• transition-delay / 変化を開始するタイミング（始まるまでの待ち時間）

値の順番は、duration → delayの順番だけご注意ください。

transition: property duration function　delay;

の順番がよく見るので一般的なのかなと思います。

transition-timing-functionの値

変化の度合いというのは、「ゆっくり → 早く」などの変化の進み具合いを指定します。

具体的な使用方法

MENUボタンを押すと隠れていたメニューがふわっと表示されるというコードを例に説明します。
※スタイルはSassで書いています

<div class="menu_button">MENU</div>
<ul class="menu_ul">
	<li>About us</li>
	<li>Shop</li>
	<li>Contact</li>
</ul>

.menu_ul {
	background-color: white;
	visibility: hidden;
	opacity: 0;
	transition: opacity .3s ease .1s;

	&.open {
		visibility: visible;
		opacity: 1;
	}
}

document.addEventListener("DOMContentLoaded", function() {
  const menuButton = document.querySelector('.menu_button');
  const menuUl = document.querySelector('.menu_ul');

  menuButton.addEventListener('click', function() {
    menuUl.classList.toggle('open');
  });
});

JavaScriptにてボタンにクリックイベントを追加し、クリックするとopenというクラスをメニューのブロックに付与します。

スタイルシートのコードをご覧ください。

.menu_ul {
	background-color: white;
	visibility: hidden;
	opacity: 0;
	transition: opacity .3s, visiblity .3s;

	&.open {
		visibility: visible;
		opacity: 1;
	}
}

opacity と visibility の二つのプロパティに対する設定をカンマ区切りで指定しています。

このようにすることで複数のプロパティに同時に設定をすることができます。

all で一気に全部を指定することもできるのですが、バグに繋がることがあるので極力必要なものだけ指定した方が良いかと思います。

ちなみに display: none ではなく visiblity: hidden を使っていますが、

transitionは2つの状態間の変化で、display: noneはそもそも存在していないという判定らしく設定が効きませんのでご注意ください。

まとめ

今回はCSSのtransitionについて、使い方の解説をしました。

なんとなく使っていましたがいまいちちゃんと理解していなかったのでしっかり調べてみました。

公式などで調べてまとめると理解が深まります。