追加网格后容器过渡动画不流畅的原因及解决办法

点击按钮创建两个网格，为底部容器添加shift-down类使其沿Y轴下移，等待过渡结束后将网格追加到主容器，但动画结束后底部容器会突然进一步下移，无法实现从初始位置到网格下方的无缝过渡。尝试过transitionend事件和咨询工具均未解决。

相关CSS代码 #

.grid.left,
.grid.right {
    display: flex;
    transform: scale(0);
    background: var(--main-background-clr);
    border-radius: 5px;
    flex-shrink: 0;
    width: 50%;
    height: 100%;
    aspect-ratio: 1/1;
    transition: 700ms ease;

}

.grid.left.visible,
.grid.right.visible {
    transform: scale(1);
}

.transition-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    transition: all 0.5s ease;
}

.transition-container.shift-down {
    transform: translateY(100%);
}
.ship-main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    gap: 20px;
    width: 100%;
    height: 200px;
    background: var(--grid-border-clr);
}

对应JavaScript代码 #

const generateGrids = () => {
    const mainBoardsContainer = document.querySelector('.gameboards');

    const shipMainContainer = document.querySelector('.ship-main-container');
    const transitionContainer = document.querySelector('.transition-container');

    
    const playerBoard = document.createElement('div');
    const computerBoard = document.createElement('div');
    
    playerBoard.className = 'grid left';
    
    computerBoard.className = 'grid right';
    
    playerBoard.dataset.grid = false;

    makeGridSquares(playerBoard, false);
    makeGridSquares(computerBoard, true);


    transitionContainer.classList.add('shift-down');

    setTimeout(() => {
        mainBoardsContainer.append(playerBoard, computerBoard);
        playerBoard.classList.add('visible');
        computerBoard.classList.add('visible');
    }, 500);

    
}

问题原因及解决方案 #

原因分析 #

问题核心是网格元素追加后主容器布局重排：transition-container的transform: translateY(100%)是基于初始布局的位移，但网格元素加入后，主容器高度增加，带动页面整体布局变化，容器实际位置被新增元素“挤压”下移，造成视觉上的突然跳动。

解决步骤 #

1. 提前预留网格空间
   先将网格元素添加到主容器（保持不可见状态），让布局提前稳定，避免后续添加元素触发重排：
2. 用transitionend替代固定时长setTimeout
   确保容器下移动画真正结束后，再显示网格，避免浏览器性能差异导致的时间偏差。

修改后的JavaScript代码：

const generateGrids = () => {
    const mainBoardsContainer = document.querySelector('.gameboards');
    const transitionContainer = document.querySelector('.transition-container');

    const playerBoard = document.createElement('div');
    const computerBoard = document.createElement('div');
    
    playerBoard.className = 'grid left';
    computerBoard.className = 'grid right';
    playerBoard.dataset.grid = false;

    makeGridSquares(playerBoard, false);
    makeGridSquares(computerBoard, true);

    // 先将网格加入容器，提前占据空间
    mainBoardsContainer.append(playerBoard, computerBoard);

    // 监听过渡结束事件，确保动画完成后再显示网格
    const handleTransitionEnd = () => {
        playerBoard.classList.add('visible');
        computerBoard.classList.add('visible');
        transitionContainer.removeEventListener('transitionend', handleTransitionEnd);
    };
    transitionContainer.addEventListener('transitionend', handleTransitionEnd);

    // 执行容器下移动画
    transitionContainer.classList.add('shift-down');
}

3. 额外优化：固定主容器高度
   给主容器设置最小高度，彻底避免布局波动：

.gameboards {
    min-height: 200px; /* 根据网格实际高度调整 */
    display: flex;
    gap: 10px;
    justify-content: center;
}

调整后，容器位移基于稳定的初始布局，动画结束后不会出现突然下移，实现无缝过渡效果。

内容的提问来源于stack exchange，提问作者Wakana