为什么附加网格后我的容器过渡不平滑？

Question

我对我的过渡动画有点不知所措，我已经在代码笔中复制了这个问题来分享。

当我点击按钮时，它创建了两个网格。然后将一个类应用到底部容器以将其 Y 位置向下移动页面。 setTimeout 等待此转换结束，然后将这两个网格附加到主容器。

但是你会注意到，在动画发生后，它会将底部容器进一步推到页面下方，我不明白为什么。我问了 chatGPT，但它无法提出任何可能的解决方案。

正如我所说，我尝试了各种方法来等待容器的过渡结束，但它似乎总是跳下来，而且我似乎无法从它的起始位置无缝过渡到网格下方。

相关动画发生在 transition-container 样式上：

.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 代码，然后在将网格附加到顶部容器之前等待 500 毫秒：

    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);

        
    }

如果您想查看完整代码，这是我的代码笔： https://codepen.io/itswakana/pen/poObOYQ

Answer 1

我会选择两种方式之一。我不会在过渡容器类上使用 translateY 属性，而是将位置设置为绝对位置并使用 top 属性来处理过渡......也给它一个高度。

    .transition-container {
      ...your other css properties;
      height: min-content;
      position: absolute;
      top: 0vh;
    }

    .transition-container.shift-down {
      top: 100vh;
     }

这会给你平稳的过渡。这是快速解决方法。更详细的方法是将所有内容包装在主容器 div 中。

       <div class="main-container">
         <div class="gameboards">
         </div>
         <div class="transition-container">
           <div class="ship-main-container"></div>
           <button class="start-game">Start Game</button>
         </div>
       </div>

给那个傻瓜一些风格：

     .main-container {
       display: flex;
       flex-direction: column;
       height: -webkit-fill-available; (or 100%)
       justify-content: flex-start;
       width: 100%;
     }

现在，如果你知道游戏板和过渡容器之间的高度分割，你可以将过渡容器设置为所需的高度（不是真的有必要，但我认为两者都有一个高度很好）并给游戏板一个高度: 0% 然后你将向它添加一个类，它将高度转换为任何所需的分割。您只需要确保正确处理时间，以便在游戏板上设置高度后插入您的行。

请注意，您可能只将主容器样式放在 body 元素上，但我更喜欢在创建布局时使用 div，而不是为 body 元素设置样式。我希望这会有所帮助。