react-spring?react?のカラーコードの仕様に気を配る
問題
CSSの色指定の文字列がuseSpringの戻り値のSpringValueのtoでの戻り値に含まれていて、かつ、アニメーションが終わった状態で、コンポーネントの再レンダリングが行われると、色指定文字列がrgba(rr,gg,bb,aa)の表現に置き換えられてしまうようだ。hslやrgbの指定もrgbaに置き換わってしまう。
例:
他にも置き換えられているものがありそうだ。上のも+がなくなったりする。
一方でアニメーションが終わる前なら、再レンダリングされても問題は起きないし、その場合はアニメーションが終わっても問題はない。
どういうことだろう？仕様なんだろうか。ここのドキュメントは個人的には見辛いので困る。
string.replaceしてもダメだったので、もしかするとreact自体の仕様なのかもしれない？
回避策
例のように色指定だと認識されないように:
- 半角スペースを挿入
- ゼロ幅スペースを挿入
のどちらかを行えばいいだろう。hsl(h,s,l)をhsl (h,s,l)にするなど。
半角スペースは見た目に影響するが、ゼロ幅スペースは影響しない。しかし一方で、文字列をコピーして使うのを仮定すると、ゼロ幅スペースは存在に気付かず、意図しない動作をして使用者が戸惑う可能性がある。 用途を考えて対処したい。
ゼロ幅スペースは入力が面倒なのもある。OSにもよるが記号一覧などを表示させない入力ができない。
macOSの場合は、メニューバーのAをクリックして絵文字と記号を表示をクリックしてUnicodeから探せばいい。
おわり
わかってみればどうということはないが、自分のレンダリングの仕方がおかしいのではないかと確認するのが面倒ではあった。
codesandboxはテンプレートからの環境構築がすごく楽だ。codepenより楽な気がする。 砂場的な実験が簡単にできるのはいい。若干重いのがちょっと気になるくらい。
以上です。
Amazonアソシエイト
