Angular5 入场/离场动画无效果，按官方教程操作未解决

我之前也碰到过一模一样的Angular动画失效问题——没报错但就是没效果，结合你的代码情况，咱们一步步排查修复：

1. 先确认核心依赖是否导入 #

Angular动画需要BrowserAnimationsModule的支持，这是最容易被忽略的一步！打开你的根模块（比如app.module.ts），检查是否导入了这个模块：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // 必须添加这一行！
    // 其他你的模块...
  ],
  // ...
})
export class AppModule { }

如果没加这个，所有动画都不会生效，而且不会有任何报错。

2. 检查动画触发器的定义是否正确 #

你用了slideInOut触发器，但如果定义不对，也不会有效果。确保你的组件里正确导入了动画API，并且触发器包含了滑入滑出的状态和过渡：

// 你的组件文件（比如messages.component.ts）
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-messages',
  templateUrl: './messages.component.html',
  styleUrls: ['./messages.component.css'],
  animations: [
    trigger('slideInOut', [
      // 定义显示状态
      state('in', style({
        transform: 'translateY(0)',
        opacity: 1,
        height: '26px',
        overflow: 'hidden' // 避免内容溢出
      })),
      // 定义隐藏状态
      state('out', style({
        transform: 'translateY(-100%)',
        opacity: 0,
        height: '0',
        overflow: 'hidden'
      })),
      // 状态切换的过渡动画
      transition('in <=> out', animate('300ms ease-in-out')),
      // 处理元素首次进入的动画（可选，但更友好）
      transition(':enter', [
        style({ transform: 'translateY(-100%)', opacity: 0, height: '0' }),
        animate('300ms ease-in-out', state('in').styles[0])
      ]),
      // 处理元素离开的动画（可选）
      transition(':leave', [
        animate('300ms ease-in-out', state('out').styles[0])
      ])
    ])
  ]
})
export class MessagesComponent {
  messages: Array<{ text: string, status: string }> = [];

  addMessage() {
    this.messages.push({ text: '新消息', status: 'in' });
  }

  removeMessage(index: number) {
    // 先切换状态触发动画，动画完成后再删除元素
    this.messages[index].status = 'out';
    setTimeout(() => {
      this.messages.splice(index, 1);
    }, 300); // 时长要和动画的300ms一致
  }
}

3. 修正模板中的状态绑定 #

你现在写的[@slideInOut]="'in'"是固定状态，元素移除时状态没有变化，自然不会触发退出动画。需要把状态绑定到每个消息的动态属性：

<div 
  *ngFor="let message of messages; let i = index; trackBy: trackByIndex" 
  [@slideInOut]="message.status" 
  class="message"
>
  {{ message.text }}
  <button (click)="removeMessage(i)">删除</button>
</div>

4. 添加trackBy函数避免列表重渲染 #

如果没有trackBy，Angular在添加/移除元素时会重新渲染整个列表，导致动画被跳过。在组件里添加这个函数：

trackByIndex(index: number): number {
  return index; // 如果你的消息有唯一ID，用ID更好
}

5. 检查CSS样式冲突 #

确保你的.message类没有覆盖动画中的样式，比如不要设置position: static之外的定位（除非你需要），也不要设置transform或者height的!important规则，否则会覆盖动画样式。

最后验证 #

做完以上步骤后，添加消息时应该会看到元素从上方滑入，点击删除时会滑出后消失。如果还是没效果，可以打开浏览器的开发者工具，查看元素的样式变化，看动画是否被应用（检查element.style里的transform和opacity是否有变化）。

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