pull/13317/head
Rich Harris 2 years ago
parent 4099ec1472
commit 1f4410c3b2

@ -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});`;
}
};

Loading…
Cancel
Save