Angular项目中Flex容器双DIV滑动窗口动画实现求助

核心思路 #

避开display: none（无法触发过渡动画）或position: absolute移出视口（破坏Flex布局逻辑）的方案，改用CSS过渡（transition）+ Flex布局/transform属性实现平滑滑动，同时保证两个DIV始终保留在DOM中。

完整实现代码 #

HTML结构

<div class="flex-container">
  <div class="panel panel-1">DIV 1</div>
  <div class="panel panel-2">DIV 2</div>
</div>
<button onclick="togglePanel()">切换面板</button>

CSS样式

.flex-container {
  display: flex;
  width: 400px; /* 可按需设为100%或固定值 */
  height: 200px;
  overflow: hidden; /* 隐藏容器外的面板，实现滑动视口效果 */
  border: 1px solid #ccc;
}

.panel {
  flex-shrink: 0; /* 禁止面板被压缩，保证宽度占满容器 */
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease; /* 过渡动画时长可自定义 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-1 {
  background-color: #f0f0f0;
}

.panel-2 {
  background-color: #e0e0ff;
  transform: translateX(100%); /* 默认状态下，DIV2隐藏在容器右侧外 */
}

/* 激活状态：触发滑动动画 */
.flex-container.active .panel-1 {
  transform: translateX(-100%);
}
.flex-container.active .panel-2 {
  transform: translateX(0);
}

JS控制逻辑

function togglePanel() {
  const container = document.querySelector('.flex-container');
  container.classList.toggle('active');
}

Angular适配提示 #

在Angular中无需原生JS，通过类绑定即可实现状态切换：

<div class="flex-container" [class.active]="isPanel2Show">
  <div class="panel panel-1">DIV 1</div>
  <div class="panel panel-2">DIV 2</div>
</div>
<button (click)="isPanel2Show = !isPanel2Show">切换面板</button>

在组件类中定义初始状态：isPanel2Show = false

方案说明 #

1. 容器设置overflow: hidden，为滑动效果提供视口边界
2. 面板设置flex-shrink: 0和width: 100%，确保每个面板都能占满容器宽度，且不会被Flex布局压缩
3. 用transform: translateX()控制面板位置，配合transition实现平滑过渡，这种方式不会触发页面重排，动画性能更优
4. 仅需通过切换容器的active类即可触发动画，两个面板全程保留在DOM中

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