Angular 5应用中动画结束后设置display为none/block的实现方法

嘿，我来帮你搞定这个动画收尾的问题！在Angular 5里，要实现动画结束后设置元素的display属性，有两种常用的靠谱方法，我给你详细拆解一下：

方法一：利用动画done事件手动控制 #

这种方法适合需要对动画结束后的行为做更灵活控制的场景，核心是监听动画完成的事件，然后直接操作DOM元素的样式。

步骤1：定义动画并绑定done事件 #

先在组件模板里给目标元素绑定动画，并监听done事件：

<!-- 假设每个标签内容都有对应的标识，比如data-tab -->
<div 
  *ngFor="let tab of tabs"
  [@tabAnimation]="activeTab === tab.id ? 'show' : 'hide'"
  (@tabAnimation.done)="onTabAnimationDone($event)"
  [data-tab]="tab.id"
>
  {{ tab.content }}
</div>

步骤2：编写动画逻辑和回调函数 #

在组件类里定义动画，并实现动画完成后的处理函数：

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

@Component({
  selector: 'app-tab-switcher',
  templateUrl: './tab-switcher.component.html',
  animations: [
    trigger('tabAnimation', [
      // 隐藏状态：透明、高度为0（避免占位）
      state('hide', style({ opacity: 0, height: '0px', overflow: 'hidden' })),
      // 显示状态：正常可见
      state('show', style({ opacity: 1, height: '*' })),
      // 切换动画：ease-in-out，时长300ms
      transition('hide <=> show', animate('300ms ease-in-out'))
    ])
  ]
})
export class TabSwitcherComponent {
  tabs = [
    { id: 'tab1', content: '标签1内容' },
    { id: 'tab2', content: '标签2内容' }
  ];
  activeTab = 'tab1';

  onTabAnimationDone(event: any) {
    const targetElement = event.element as HTMLElement;
    // 根据动画的目标状态设置display
    if (event.toState === 'hide') {
      targetElement.style.display = 'none';
    } else {
      targetElement.style.display = 'block';
    }
  }

  switchTab(tabId: string) {
    // 切换前先把要显示的标签display设为block，否则动画无法触发
    const targetTab = document.querySelector(`[data-tab="${tabId}"]`) as HTMLElement;
    if (targetTab) {
      targetTab.style.display = 'block';
    }
    this.activeTab = tabId;
  }
}

关键注意点 #

• 切换到新标签时，必须先把目标元素的display设为block，否则元素处于none状态时Angular动画不会执行。
• event.toState可以拿到动画结束后的目标状态，以此判断是要隐藏还是显示元素。

方法二：用Angular内置的:enter/:leave过渡自动处理 #

如果你的标签切换是基于*ngIf的显示隐藏，这种方法更简洁，不需要额外的回调函数，直接在动画序列里控制display的时机。

动画定义示例 #

animations: [
  trigger('tabAnimation', [
    // 进入动画：先显示元素，再淡入
    transition(':enter', [
      style({ display: 'none', opacity: 0 }),
      style({ display: 'block' }),
      animate('300ms ease-in-out', style({ opacity: 1 }))
    ]),
    // 离开动画：先淡出，再隐藏元素
    transition(':leave', [
      animate('300ms ease-in-out', style({ opacity: 0 })),
      style({ display: 'none' })
    ])
  ])
]

模板使用 #

<div *ngIf="activeTab === 'tab1'" [@tabAnimation]>
  标签1内容
</div>
<div *ngIf="activeTab === 'tab2'" [@tabAnimation]>
  标签2内容
</div>
<button (click)="activeTab = 'tab1'">切换到标签1</button>
<button (click)="activeTab = 'tab2'">切换到标签2</button>

原理说明 #

• :enter对应元素从*ngIf="false"变为true的过程：先把display从none改成block，再执行淡入动画，确保动画能正常显示。
• :leave对应元素从true变为false的过程：先执行淡出动画，动画结束后再把display设为none，完美实现动画结束后隐藏元素的需求。

必做前置操作 #

别忘了在你的根模块（比如AppModule）里导入Angular动画模块，否则所有动画都不会生效：

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

@NgModule({
  imports: [
    // 其他模块（比如BrowserModule等）
    BrowserAnimationsModule
  ]
})
export class AppModule { }

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