2014-05-08

CSS3のTransitionでは値として"auto"を指定できない

タイトルに書いたとおり、CSS3の標準的な仕様なのか、どのブラウザでもうまく動かなかった。

これの何が困るかというと、例えば複数のボックスを表示したいとする。最初は文字の長さに応じてボックスの大きさを決めておき、その後にアニメーションさせてすべて同じ幅にしたいな、と思った時にfromをautoに、toを300pxなどと設定することができないのだ。

調べてみると、width:autoの代わりに小さめの値に設定したmin-widthを使えば良いことがわかった。考えてみれば当たり前のことだけど、min-widthは取りうる最小値を指定するだけだから、内容物のwidthがそれを上回ったら自動で大きくなる。そのためwidth:autoを設定した場合と見た目は変わらないのだ。同様にmax-widthやmax-heightを使うこともできる。

サンプルを用意してみた。

カーソルを乗せるとボックスが拡大するが、滑らかにアニメーションできているのはmin-widthを指定した場合のみだ。

何かの参考になれば。