mediumっぽいlightboxのなめらかなtransitionを書いた時のメモ

mediumの画像を拡大するときのインタラクション(例えばこの記事)はクールですよね。Material Designでも視線を意識したインタラクションは重視されていたり、より手触りの良いWebの時代の為にこのへんの知見は貯めておきたいところです。

自分の整理の整理の為にも、シンプルかなと思う方法だけメモしておきます。

1. 拡大前要素の絶対位置を大きさを図る

var originalPos = $("#hoge").get(0).getBoundingClientRect();

getBoundingClientRect()で絶対位置、大きさがわかります。返り値はこんな感じです。

{ bottom: 22514.515625, height: 24244.515625, left: 0, right: 1141, top: -1730, width: 1141 }

jQueryのoffset()の中ではgetBoundingClientRect()を使ってるという噂を聞いたので、このへんは色々やり方があると思います。

2. 拡大前要素の位置に複製したdivを重ねる

複製したdivを重ねます。width, heightを変更する可能性があるならdivのが後々楽だと思います。

copy = $("<div/>").css({
  height: original.height(),
  width: original.width(),
  position: 'absolute',
  top: originalPos.top,
  left: originalPost.left,
  'transform-origin': 'center center'
  'transition-property': 'transform'
  'transition-duration': '0.25s'
  'transform': "translate(0,0) scale(1)"
});
$("body").append(copy);

transformで操作するので、transition指定して、やる気マンマンでスタンバっときます。

3. 拡大後の状態にtransformを使って変形させる

scale = ...; //いい感じの大きさを計算
offsetX = ...; // いい感じの位置を計算
offsetY = ...; // いい感じの位置を計算

copy.css({'transform': "translate(" + parseInt(offsetX*10)/10 + "px," + parseInt(offsetY*10)/10 + "px) scale(" + scale + ")"});

4. 戻す時はtransformを初期値に

copy.css({'transform': "translate(0,0) scale(1)"}).one('webkitTransitionEnd MSTransitionEnd oTransitionEnd transitionend', function(){
  copy.remove()
});

transformを元に戻せば元の位置に戻ります。animationが終わったり、不要になったタイミングで要らないものは削除しときましょう。

以上です。
合わせて、overlayを敷くとかwidthとheightを変えるとか臨機応変に書けばいいと思います！