Angular 17动画问题：如何实现左右两侧同步滑动/收缩？

问题根源在于*ngIf会直接从DOM中移除左侧div，导致右侧div的布局调整只能在左侧元素完全消失后触发，无法同步动画。可以通过以下两种方案解决：

方案一：纯CSS过渡控制（简单高效） #

不用*ngIf移除元素，而是通过CSS类控制左侧div的宽度和透明度，同时给右侧div添加过渡动画，让布局变化平滑同步：

1. 组件类定义状态变量

showLeftDiv = true;

toggleLeftDiv() {
  this.showLeftDiv = !this.showLeftDiv;
}

2. 模板修改

<div class="container">
  <div class="left-div" [class.hidden]="!showLeftDiv">左侧内容</div>
  <div class="right-div">右侧内容</div>
</div>
<button (click)="toggleLeftDiv()">切换左侧div</button>

3. 添加CSS样式

.container {
  display: flex;
  gap: 1rem;
}

.left-div {
  width: 200px;
  background-color: #eee;
  transition: width 0.3s ease, opacity 0.3s ease;
  overflow: hidden; /* 防止内容溢出 */
}

.left-div.hidden {
  width: 0;
  opacity: 0;
}

.right-div {
  flex: 1;
  background-color: #ddd;
  transition: flex-grow 0.3s ease; /* 同步宽度变化的过渡 */
}

方案二：Angular动画结合状态绑定 #

如果需要保留*ngIf的DOM移除逻辑，需要给右侧div绑定动画触发器，让它和左侧的离场动画同步：

1. 导入并定义动画

import { animate, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  animations: [
    trigger('leftSlide', [
      transition(':leave', [
        animate('0.3s ease', style({ width: 0, opacity: 0 }))
      ])
    ]),
    trigger('rightExpand', [
      transition('true => false', [
        animate('0.3s ease', style({ flexBasis: '100%' }))
      ]),
      transition('false => true', [
        animate('0.3s ease', style({ flexBasis: 'calc(100% - 216px)' })) // 对应左侧宽度+gap
      ])
    ])
  ]
})
export class YourComponent {
  showLeftDiv = true;

  toggleLeftDiv() {
    this.showLeftDiv = !this.showLeftDiv;
  }
}

2. 模板绑定动画

<div class="container">
  <div class="left-div" *ngIf="showLeftDiv" [@leftSlide]>左侧内容</div>
  <div class="right-div" [@rightExpand]="showLeftDiv">右侧内容</div>
</div>
<button (click)="toggleLeftDiv()">切换左侧div</button>

3. 基础CSS布局

.container {
  display: flex;
  gap: 1rem;
}

.left-div {
  width: 200px;
  background-color: #eee;
}

.right-div {
  flex-basis: calc(100% - 216px);
  background-color: #ddd;
}

核心思路是让右侧div的布局变化和左侧的动画时长、节奏完全匹配，避免DOM移除导致的布局延迟。

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