实现div展开时向上平移动画并保持flex居中布局

核心实现要点 #

• 利用flex布局让容器在页面始终保持垂直水平居中
• 通过CSS过渡动画实现容器尺寸变化时的平滑位置调整
• 用JS控制按钮与表单的显示切换

HTML 结构 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>居中容器动画效果</title>
</head>
<body>
    <div class="center-container">
        <h1>主标题</h1>
        <h2>副标题</h2>
        <button id="switchBtn">点击展开表单</button>
        <form id="inputForm" class="hidden">
            <input type="text" placeholder="输入项1">
            <input type="text" placeholder="输入项2">
        </form>
    </div>
</body>
</html>

CSS 样式 #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
}

.center-container {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* 统一过渡动画 */
    text-align: center;
}

.center-container.expanded {
    padding: 3.5rem 2rem; /* 扩大容器上下内边距，实现尺寸变大 */
}

h1 {
    margin-bottom: 1rem;
}

h2 {
    margin-bottom: 2rem;
    color: #666;
    font-weight: normal;
}

button {
    padding: 0.9rem 1.8rem;
    border: none;
    background: #2563eb;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

form {
    margin-top: 2rem;
}

input {
    display: block;
    width: 100%;
    padding: 0.9rem;
    margin-bottom: 1.2rem;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
}

.hidden {
    display: none;
}

JavaScript 交互逻辑 #

const switchBtn = document.getElementById('switchBtn');
const inputForm = document.getElementById('inputForm');
const container = document.querySelector('.center-container');

switchBtn.addEventListener('click', () => {
    // 隐藏按钮，显示表单
    switchBtn.classList.add('hidden');
    inputForm.classList.remove('hidden');
    // 给容器添加扩展类，触发尺寸和位置动画
    container.classList.add('expanded');
});

关键说明 #

• 页面body采用flex布局，通过justify-content: center和align-items: center让容器始终居中
• 容器的transition: all 0.3s ease属性确保尺寸变化（padding调整）和位置重新计算的过程平滑过渡，表现为向上移动的动画
• 点击按钮时，切换元素显示状态并给容器添加扩展类，flex布局会自动重新计算居中位置，配合过渡动画完成需求效果

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