CSSのtransitionは変更前と変更後に同じプロパティを設定する必要がある

雰囲気でCSSを書いていると良くないって話

2023-12-28

変更前と変更後で同じプロパティがないと、transitionは適用されないという当たり前っぽいけど見落としがち（多分）な問題に直面したのでメモ

// 何かのスタイルを設定するコード。すでにtransitionは設定されていて、動的に動くスタイルだけをここで計算している、みたいな想定
if (isChecked) {
  return {
    width: `${checkedLabelWidth}px`,
    left: `calc(${checkedLeftPadding}px + 0.25rem)`,
  };
}

return {
  width: `${defaultLabelWidth}px`,
};

こんな感じのコードを書いて、 isCheckedの値が切り替わったときに動的にスタイルを付け替える。これは実行してみるとわかるがうまく動かず、widthだけがアニメーションする。

if (isChecked) {
  return {
    width: `${checkedLabelWidth}px`,
    left: `calc(${checkedLeftPadding}px + 0.25rem)`,
  };
}

return {
  width: `${defaultLabelWidth}px`,
	left: '0' // <-- この行を追加した
};

正しくはこう。

雰囲気でスタイル書いているとこういうのに気づかなかったりする。反省。