Why do my elements flicker before an animation using css-CodePudding

I was creating a 2048 clone from scratch as a project. I have got the game pretty much working only problem is that my animations look janky. I have used css grid to construct my game board and after every move (user input) all the tiles are meant to slide across the board in a direction. That part works fine, it's when they start the slide animation that for whatever reason some of the elements flicker.

I'm not the best with css animations but I have tried to look at every resource I could and I couldn't find any solutions suited to my code. I tried switching the animation timing, delaying the animation etc to no avail. I did use a package animate-css-grid (because animating css grid is hard) which only handles the tiles sliding across the grid and I do not suspect that it is causing the issue.

I have put the code on js fiddle if anyone is interested to try and see the problem https://jsfiddle.net/codedjourney/uv1o48L6/3/ hello

Also if anyone has a better way of animating css grid let me know the package while helpful is a bit odd to work with. Thanks for the help

CodePudding user response：

I managed to get rid of the flickering by commenting out the hidden class in the addTile method

addTile(tile) {
    // create the tile
    const tileElm = document.createElement("div")
    tileElm.classList.add(
        "cell",
        "tile",
        // "hidden",
        `cell-${tile.x}-${tile.y}`
    )

    const valueElm = document.createElement("div")
    valueElm.classList.add("tile-container", `value-${tile.value}`)
    valueElm.textContent = tile.value

    tileElm.appendChild(valueElm)
    this.display.appendChild(tileElm)

    this.cells[tile.x][tile.y] = new Tile(
        tileElm,
        tile.x,
        tile.y,
        tile.value
    )
    // request frame to allow transition to play
    window.requestAnimationFrame(() => {
        tileElm.classList.remove("hidden")
    })
}

CodePudding user response：

As I saw your code All I see is that it's getting larger while colliding and it's happening because you have added css the one which scales your box while colliding. Transform: Scale Try using this css style and you might get your problem solved.