elf
/
fridgemagnets
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adding an animation frame between the render() and the update() allowed for enough of a reflow that Firefox is able to get the tile sizes correctly.

This commit is contained in:
Elf M. Sternberg 2025-01-21 10:42:44 -08:00
parent 80a9c7aa35
commit f726ef1b93
1 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/fridge-board.ts
View File

@ -195,13 +195,12 @@ export class FridgeBoard extends LitElement {
render() {
return html`<div id="fridge" @pointerdown=${this.onPointerDown}>
${words.map(word => html`<fridge-tile style="opacity: 0" word=${word.w}></fridge-tile>`)}
${words.map(word => html`<fridge-tile style="opacity: 0.01" word=${word.w}></fridge-tile>`)}
</div>`;
}
updated() {
const { width: boardWidth, height: boardHeight } = this.getBoundingClientRect();
this.assignNewPositions();
const fd = (size: number) => {
const newDelta = 40 * Math.random();
@ -219,7 +218,7 @@ export class FridgeBoard extends LitElement {
}
};
requestAnimationFrame(() => {
const positionTilesOutsideBoard = () => {
this.tiles.forEach(tile => {
const outerX = fd(boardWidth);
const outerY = fd(boardHeight);
@ -229,17 +228,24 @@ export class FridgeBoard extends LitElement {
tile.style.setProperty("rotate", `${Math.random() * 720}deg`);
tile.style.setProperty("opacity", "100%");
});
};
lastTile.addEventListener("transitionend", slideEnd);
requestAnimationFrame(() =>
const startTileAnimation = () => {
this.tiles.forEach(tile => {
tile.classList.add("ready-to-slide");
tile.style.setProperty("translate", "0 0 0");
tile.style.setProperty("rotate", `${Math.random() * 30 - 15}deg`);
tile.style.setProperty("scale", "1.0");
})
);
});
};
requestAnimationFrame(() => {
this.assignNewPositions();
requestAnimationFrame(() => {
positionTilesOutsideBoard();
lastTile.addEventListener("transitionend", slideEnd);
requestAnimationFrame(() => startTileAnimation());
});
});
}
}