|
|
|
|
@ -12,26 +12,26 @@ import { cubicOut } from '../easing/index.js';
|
|
|
|
|
* @returns {AnimationConfig}
|
|
|
|
|
*/
|
|
|
|
|
export function flip(node, { from, to }, params = {}) {
|
|
|
|
|
const style = getComputedStyle(node);
|
|
|
|
|
var style = getComputedStyle(node);
|
|
|
|
|
|
|
|
|
|
const zoom = from.width / parseFloat(style.width); // https://drafts.csswg.org/css-viewport/#effective-zoom
|
|
|
|
|
const transform = style.transform === 'none' ? '' : style.transform;
|
|
|
|
|
const [ox, oy] = style.transformOrigin.split(' ').map(parseFloat);
|
|
|
|
|
const dsx = from.width / to.width;
|
|
|
|
|
const dsy = from.height / to.height;
|
|
|
|
|
const dx = (from.left + dsx * ox - (to.left + ox)) / zoom;
|
|
|
|
|
const dy = (from.top + dsy * oy - (to.top + oy)) / zoom;
|
|
|
|
|
const { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut } = params;
|
|
|
|
|
var zoom = from.width / parseFloat(style.width); // https://drafts.csswg.org/css-viewport/#effective-zoom
|
|
|
|
|
var transform = style.transform === 'none' ? '' : style.transform;
|
|
|
|
|
var [ox, oy] = style.transformOrigin.split(' ').map(parseFloat);
|
|
|
|
|
var dsx = from.width / to.width;
|
|
|
|
|
var dsy = from.height / to.height;
|
|
|
|
|
var dx = (from.left + dsx * ox - (to.left + ox)) / zoom;
|
|
|
|
|
var dy = (from.top + dsy * oy - (to.top + oy)) / zoom;
|
|
|
|
|
var { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut } = params;
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
delay,
|
|
|
|
|
duration: typeof duration === 'function' ? duration(Math.sqrt(dx * dx + dy * dy)) : duration,
|
|
|
|
|
easing,
|
|
|
|
|
css: (t, u) => {
|
|
|
|
|
const x = u * dx;
|
|
|
|
|
const y = u * dy;
|
|
|
|
|
const sx = t + u * dsx;
|
|
|
|
|
const sy = t + u * dsy;
|
|
|
|
|
var x = u * dx;
|
|
|
|
|
var y = u * dy;
|
|
|
|
|
var sx = t + u * dsx;
|
|
|
|
|
var sy = t + u * dsy;
|
|
|
|
|
return `transform: ${transform} translate(${x}px, ${y}px) scale(${sx}, ${sy});`;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|