Estoy haciendo un juego de "palabras" en Svelte.

Contexto

Hay una tabla 2d, y quiero dar efecto a la celda actual (sé currentX y currentY ). Cuando el usuario escribe una letra específica, tengo que actualizar su valor de posición a la siguiente celda. Codifiqué como a continuación.

 typedLetterStore.subscribe(({ letter }) => { if (letter === "") { return; } board[currentX][currentY] = letter; if (currentY + 1 === COL) { if (currentX + 1 < ROW) { currentX += 1; currentY = 0; } } else { currentY += 1; } });

 <div class="board"> {#each board as boardRow, rowIndex} <div class="board__row"> {#each boardRow as element, colIndex} <span class="board__element" class:board__element--current={ currentY === colIndex && element !== ""} > {element} </span> {/each} </div> {/each} </div>

board__element--current da un efecto de "reducción de escala" mediante la animación CSS, pero no activa ningún efecto cuando uso la lógica de actualización anterior (que actualiza currentX y currentY ). Por supuesto, puedo aplicar el cálculo inverso a currentX y currentY para satisfacer la posición anterior. Pero, no se siente método natural. Para resumir, necesito 2 cosas.

• Da un efecto de "reducción de escala" a la posición actual.
• Actualice currentX y currentY a la siguiente posición

Ya probé afterUpdate Svelte lifecycle API, pero no funcionó.

Pregunta

¿Cómo puedo actualizar currentX y currentY DESPUÉS de que finalice la animación de "reducción de escala"? Puede verificar qué es el efecto de "reducción de escala" en el juego oficial de wordle escribiendo cualquier letra.