DOMRect

[hysryt]

DOM要素の位置、サイズを持つオブジェクト getBoundingClientRect()で取得する https://caniuse.com/#feat=getboundingclientrect

プロパティ	説明
x	横方向の絶対位置
y	縦方向の絶対位置
width	横幅
height	縦幅
top	yと同じだが、heightがマイナスの場合、y + height
left	xと同じだが、widthがマイナスの場合、x + width
bottom	y + heightと同じだが、heightがマイナスの場合、y
right	x + widthと同じだが、widthがマイナスの場合、x

---

使用例

var ele = document.getElementById('box');
var rect = ele.getBoundingClientRect();
console.log(rect.x);

[hysryt]

FLIP Animation

https://aerotwist.com/blog/flip-your-animations/ DOM入れ替え時のアニメーション

<!-- before -->
<div id="AAAAA"></div>
<div id="BB"></div>

<!-- after -->
<div id="BB"></div>
<div id="AAAAA"></div>

1. 入れ替え前の位置情報を取得（getBoundingClientRect()）
2. 要素の入れ替え
3. 入れ替え後の位置情報を取得（getBoundingClientRect()）
4. 入れ替え前と入れ替え後の位置情報から移動量を計算し、入れ替え前の位置に要素を表示（translateX、translateYなど）
5. CSSアニメーションで入れ替え後の位置までアニメーションさせる（translate...を削除する）

5.の処理はrequestAnimationFrameに渡す。 そのまま実行するとアニメーションされないため、次のアニメーションフレームでtranslateを削除するために、requestAnimationFrameに処理を渡す必要がある