CSSのtransitionは変更前と変更後に同じプロパティを設定する必要がある
雰囲気でCSSを書いていると良くないって話
日々の作業で出てきた技術メモの切れ端を置いておくページ
雰囲気でCSSを書いていると良くないって話
変更前と変更後で同じプロパティがないと、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' // <-- この行を追加した
};正しくはこう。
雰囲気でスタイル書いているとこういうのに気づかなかったりする。反省。