メモを揉めスマートフォン用の表示で見るメモを揉めお勉強の覚書。この広告は、90日以上更新していないブログに表示しています。FlexboxCSS3のtransition。一般的なウェブアプリのUIで動きが必要になる時って、始点と終点がある程度決まっていて、animationの@keyframeを駆使するような動きは限定的なことが多いと思うのだけど。このtransitionを使っていていつも悩ましいのが、widthやheightがautoに設定されている要素にtransitionを適用したい時です。transitionを有効にする場合、始点と終点の値を100pxのように絶対値で指定するか、50%(もちろんheightなどで親のautoを引継いでしまっている場合はダメ)のように相対値で指定することはできるけど、autoだとtransitionが効かない。JavaScriptdocument.querySelector('.foo').classList.add('opened');のようにclass="opened"になるとheightの値は0からautoに変わるが、transitionによる効果は適用されない。JavaScriptdocument.querySelector('.foo').classList.remove('opened');のようにopenedを取り去ると、heightの値はautoから0に変わるが、この場合もtransitionの効果は発生しない。ドロップダウンメニューや開閉可能なペインのように、コンテンツの内容に応じてリサイズしたい場合に困る。これを解決する良い方法はまだよく分からないのですが、実際に試してみた幾つかのアプローチをメモしておきます。基本方針JavaScriptによる操作は最低限にしたい。classの付け外しなどにとどめ、インラインスタイルの値を直接いじるのは最終手段にしたい。autoを使わないいきなり解決して無いですが、サイズを明示的に指定できる場合は極力指定する、という方法。(折り返しを許可しない)一行だけのインラインが含まれるような要素の場合line-height+padding-top+padding-bottomでheightを指定できる。インラインが取り得る文字数の範囲が予測できる場合は、widthの値も明示できる可能性がある。20px)のような指定であればtransitionは効くので、それらで解決できないかも検討してみる。max-height、max-widthを使用するheight、widthの代わりにmax-height、max-widthを使用する方法。transition-propertyにはmax-height、max-widthを指定する。以下のようにmax-heightを100vhのように指定しておくと、コンテンツの高さに合わせて.fooの高さが決まる(ただしコンテンツが100vh以上の場合は100vhになる)。flexにする必要がある。100%ただし、以下のようなデメリットがある為、きめ細く動きを調整したい場合には向いていない。transitionの始点、終点はmax-height、max-widthの値で計算されるそのため、実際の高さ、幅とmax-height、max-widthの差が大きいほどtransitionの効果は不自然になる基本的に設定したtransition-durationより短くなる(早くtransitionが終了する)transition-timing-functionもheight、widthの始点、終点とズレるので綺麗に適用されないサイズが小さくなる動きの場合、クリックなどのユーザアクションに対して反応が遅れる簡単なので間に合わせでとりあえず動きを付けたいという時は良いかも知れない。JavaScriptでコンテンツサイズを調べるgetComputedStyle、getBoudingClientRectなどでコンテンツのサイズを調べる方法。ここではgetBoundingClientRectを使うようにする。absoluteを適用する。この要素のheight、widthにautoを指定して、ドロップボックスがエキスパンドした状態などを維持させておき、常にコンテンツサイズに合わせておく。このラッパー要素からgetBoundingClientRectでサイズを取得してリサイズする要素に適用する。今のところこの方法が一番良さそうに感じる。autoの値を正しく得るために、外側のheight、widthが固定値の場合はそれをラッパー要素にも適用する。}});唯一の欠点は、ドロップダウンメニューなどが開閉する際、コンテンツ自体はサイズが伸び縮みしないので、もしそういう風に動きを付けたい場合は、もう一手間必要になる、という点。個人的な感覚では、コンテンツのサイズを伸び縮みさせたくないことのほうが多い(トランジションの途中で文字の折り返し部分が変わっていったりするとキモい)ので、あまり困らないかなと思う。transitionを一旦無効にしてサイズを調べる方法やってみたけど、ボツにした方法。利点を挙げるとすれば、コンテンツがテキストノードだけの場合でも使えるので、ラッパー要素を用意する必要が無い。ブラウザ間の誤差を気持ち悪いハックで誤魔化しているので、いつ動かなくなっても驚かない。インラインスタイルでtransitionにnoneを設定height、widthにautoを適用getBoundingClientRectでheight、widthを調べるheight、widthを元の値に戻すtransitionを元の値に戻すsetTimeoutで非同期にheight、widthに適用するFireFox、ChromeではsetTimeoutで非同期に適用しないとtransitionが効かない、またChromeでは第二引数を0にすると効かないことがある。Safariでは同期処理中にもチラつきがある。元の値を0以外にすると、autoの値を適用した時に、一度0になってしまう。}});今日の結論height、widthにautoが設定してある要素にtransitionを適用したい場合は、ラッパー要素を用意してJavaScriptでサイズを取得するのが良いと思う。CSSだけだと厳しそうなので、JavaScriptで少しカバーしてあげるとバランスが良い。flex内の各要素(以下flexアイテム)は...2016-07-28Stylusのあまり知られていない機能というより、自分が最近知った機能。)はてなブログをはじめよう!alluserさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。