create FLIP animation

createFlipAnimation.ts

function calculateFlipPositions(firstRect: ClientRect, lastRect: ClientRect) {
    return {
        x: firstRect.left - lastRect.left,
        y: firstRect.top - lastRect.top,
        w: firstRect.width / lastRect.width,
        h: firstRect.height / lastRect.height,
    };
}

function triggerRepaint(element: HTMLElement) {
    element.offsetHeight;
}

export function createFlipAnimation(firstElement: HTMLElement) {
    const firstRect = firstElement.getBoundingClientRect();
    return function start(lastElement = firstElement) {
        lastElement.style.transition = 'none';
        triggerRepaint(lastElement);
        const lastRect = lastElement.getBoundingClientRect();
        const calc = calculateFlipPositions(firstRect, lastRect);
        lastElement.style.transform = `translate(${calc.x}px, ${calc.y}px) scale(${calc.w}, ${calc.h})`;
        lastElement.style.transformOrigin = 'top left';
    };
}