React.js吹き出しコンポーネントを作った時から、SVGで面白い動きのコンポーネントが作ってみたいと思っていて、その習作としてSVGで描画したぽよんと表示されるmodalコンポーネントを作ってみた。react-elastic-modalサンプル以下のように使用する。react-modalに似せたつもり。example</div></Modal>このコンポーネントについて使用例@59nagaさんが以下のサイトで使ってくれている。https://cdn.berabou.me/SVGまわり以下のように書いて、rafでアニメーションしてる。なんかあまりいい方法とは思えない。親から例えばサイズを100px×100pxでもらった場合、伸縮を表現するためにSVG領域は110px×110px確保している。アニメーション完了後いサイズを戻せばいいんだろうけど、今は放置している。SVGの機能についても、もっと理解を深める必要がありそう。modalのコンテンツはSVGとは別レイヤーにしてz-indexで被せている。この辺りも正攻法を把握してない。-50%)で座標が小数点になって表示がぼやけるってことに遭遇した。これだったらボックスのサイズを知る必要がなく便利なんだけど、結局古のネガティブマージンで対応することにした。-50%);}テストまわり最近はenzymeを使っているんだけどまだ理解できていないところが多い。基本shallowを使ってテスト(この場合はmockは不要?)して、必要に応じてmountするという方法をとってるんだけどそういうスタンスでいいんだろうか。defaultPropsの値を確認したかったり、componentDidMountを発火させたかったり、element.clientHeightを取りたいような場合はどうしいてもmountする必要がある。その場合は結局mockeryとかproxyquireとかでmockに置き換える必要があると思う(今回は単一のコンポーネントなので必要ないけど)んだけどそうのようなスタンスでいいのか不明だ。一点ハマった点は、modalのclinetHeight/Widthが常に0が取れてきていて、なんだろうと思っていたんだけどマウントの仕方が悪かったよう。/>);正しくは以下のようにdivにアタッチする必要があるよう。});そのため、beforeとafterで以下のようにしている。...さいごSVGは楽しいんだけど、もう少し、SVG自身の機能や作法を学ぶ必要がありそう。モーフィング周りにいいライブラリがあるともっと楽しめそうなんだが、sebmarkbage/artこのあたりとか使えるんだろうか。ReactでChannelを使用した簡易チャットを作る(1)勉強用の題材としてブログを作りはじめた。ブ...2016-03-01吹き出しコンポーネントを作った吹き出しコンポーネントが必要になって作った。12引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。