<script>
import { fade, crossfade } from 'svelte/transition';
import { flip } from 'svelte/animate';
const incoming = new Map();
const outgoing = new Map();
const messages = [];
let msgIndex = 0;
function addMessage(description, key, msg) {
messages.unshift(`${msgIndex++} ${description} "${key}": ${msg}`);
messages = messages;
}
function coordinatedTransition(myNode, otherRect, options) {
// crossFade gets the bounding rect of both nodes and tweens between them here.
let myRect = myNode.getBoundingClientRect();
const style = getComputedStyle(myNode);
const transform = style.transform === 'none' ? '' : style.transform;
let deltaX = otherRect.left - myRect.left;
let deltaY = otherRect.top - myRect.top;
return {
duration: 300,
css: (t, u) => {
let x = deltaX * u;
let y = deltaY * u;
let style = `transform-origin:top left;
transform: ${transform} translate(${x}px, ${y}px);
opacity:${t}`;
return style;
}
};
}