その他

アニメーション

CSSにおけるtransitionとanimationは、要素のスタイル変化を滑らかにするための2つの異なる手法です。
JavaScriptでアニメーションを行う場合、最も簡単なのは JavaScriptでタイミングのみを制御し、アニメーションはCSSを使う方法です。

CSSのtransition

transitionは、要素のスタイルが変更されたときにその変化をアニメーション効果で滑らかにするプロパティです。
transitionは、スタイルの変更がトリガー（ホバー、クリックなど）されたときのみアニメーションが発生します。

.hoge {
		background-color: blue;
		transition: background-color 0.5s ease;
}

.hoge:hover {
	background-color: red;
}

CSSのanimation

animationは、トリガーなしで指定されたスタイルを時間の経過とともに自動的に変更するアニメーションを作成します。
animationは、@keyframesルールで定義されたスタイル変化に基づいて実行されます。

@keyframes slide {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(100px);
	}
}

.element {
	animation: slide 2s ease-in-out infinite;
}

命名規則

CSSで「is-状態」というクラスは、要素が特定の状態を表す際に使われることが多い命名規則です。
「is-」のプレフィックスを使用することで、状態を明確に区別しやすくコードの可読性と保守性が向上します。

よく使われる「is-」クラス

is-active

要素が「アクティブ」な状態を表します。

.hoge{
	opacity: 0;
}
.hoge.is-active{
	opacity: 1;
}

is-hidden

要素が非表示であることを示します。

.hoge{
	display: block;
}
.hoge.is-hidden{
	display: none;
}

is-loading

要素が「読み込み中」であることを表します。

.hoge{
	cursor: auto;
}
.hoge.is-hidden{
	cursor: progress;
}

is-disabled

要素が「無効」な状態を示します。

.hoge{
	pointer-events: auto;
	opacity: 1;
}
.hoge.is-hidden{
	pointer-events: none;
	opacity: 0.5;
}

is-open

メニューやモーダルが開いている状態を表します。

.hoge{
	opacity: 0;
	visibility: hidden;
}
.hoge.is-hidden{
	opacity: 1;
	visibility: visible;
}

状態を表す言葉

要素の表示状態に関するクラス

操作・インタラクションに関するクラス

読み込み・初期化に関するクラス

アニメーション・動作に関するクラス

エラー・バリデーションに関するクラス

例

例えば、JavaScriptで「is-active」を追加したり削除したりすることで、要素の表示・非表示を切り替えられます。

const hoge = document.querySelector('.hoge');
hoge.classList.toggle('is-active');