CSS Переход не работает при перемещении плитки в DEAC ⇐ Javascript

[Anonymous]

Я строю раздвижной головоломку в React, используя CSS -переходы, чтобы оживить движение плитки. Плитка абсолютно расположена с верхней и слева, и я применяю переход CSS на эти свойства. Но перемещение плитки вниз заставляет его мгновенно «прыгнуть» на место - без анимации. < /P>
рендеринг плиток < /p>
{map.map((tileValue, index) => {
if (tileValue === map.length - 1) return null; // Skip empty tile

// Calculate actual tile's current position
const visualRow = Math.floor(index / puzzleCols);
const visualCol = index % puzzleCols;

const tileWidth = boardWidth / puzzleCols;
const tileHeight = boardHeight / puzzleRows;

// Original image slice position
const imageRow = Math.floor(tileValue / puzzleCols);
const imageCol = tileValue % puzzleCols;

return (
swapTiles(index)}
/>
);
})}
< /code>

[*] плитки расположены на основе их индекса в массиве карт. < /li>
Пустая плитка представлена ​​на высшем значении (8 в 3x3). < /li>
Карта обновляется с использованием Setmap (), когда плитка щелкнула и подходит к пустой tile. /> < /ul>
Swaptiles обновляет состояние, как это: < /p>
const swapTiles = (tileIndex) => {
const emptyIndex = findEmptyTile(map); // Get the index of the empty tile (last tile)

// Calculate row and column of empty tile
const emptyRow = Math.floor(emptyIndex / puzzleCols);
const emptyCol = emptyIndex % puzzleCols;

// Calculate row and column of clicked tile
const row = Math.floor(tileIndex / puzzleCols);
const col = tileIndex % puzzleCols;

// Check if clicked tile is adjacent to the empty tile (left, right, up, down)
const isAdjacent =
(Math.abs(row - emptyRow) === 1 && col === emptyCol) ||
(Math.abs(col - emptyCol) === 1 && row === emptyRow);

if (isAdjacent) {
// Swap the clicked tile with the empty space in the map
const newMap = [...map]; // Copy the map
newMap[emptyIndex] = map[tileIndex]; // Move clicked tile to empty space
newMap[tileIndex] = map[emptyIndex]; // Move empty space to clicked tile position

setMap(newMap); // Update the map
}
};
< /code>
Что я попробовал < /p>

Убедиться, что верхнее значение действительно изменяется (например, от 0PX до
300px).
Используемый инспектор Chrome Animation - анимация обнаружена слева, справа и вверх, но не вниз. setMap (newmap) в запросе extrainimationFrame и SetTimeout (..., 0)-без эффекта. < /li>
< /ul>
Что может привести к провалу перехода только при перемещении плитки вниз? Как я могу гарантировать, что тот же элемент DOM сохранился и применяются переходы?>

Подробнее здесь: https://stackoverflow.com/questions/797 ... ing-puzzle