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

30
src/fridge-board.ts
View File

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