Angular最新版本下替代@angular/animations实现高度过渡动画的最优方案

嘿，我完全理解你现在的困扰——Angular最新版本里@angular/animations被标记为弃用，要把原来的高度折叠展开动画迁移过去确实得找个靠谱的替代方案。针对你这个最小示例里的需求，我给你准备了两种最优的实现方式，都能完美复刻原来的动画效果，而且都是Angular现在推荐的实践方向。

方案一：纯CSS Transition + Angular信号（首推方案） #

对于这种简单的状态切换动画，用原生CSS Transition实现是最理想的——它不需要依赖任何额外库，性能更好，代码也更简洁。我们只需要用Angular的信号控制元素类名，剩下的交互动画全交给CSS处理就行。

完整实现代码 #

import 'zone.js';
import { Component, signal } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  standalone: true,
  styles: `
    .collapsible-content {
      overflow: hidden;
      transition: all 300ms ease-in-out;
    }

    .collapsible-content.open {
      height: auto;
      padding: 16px;
      margin: 16px 0;
    }

    .collapsible-content.closed {
      height: 0;
      padding: 0 16px;
      margin: 0;
      border: 0;
    }
  `,
  template: `
    <button type="button" (click)="toggleOpen()">Toggle</button>
    <p class="collapsible-content" [class.open]="isOpen()" [class.closed]="!isOpen()">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
  `,
})
export class App {
  readonly isOpen = signal(false);

  toggleOpen() {
    this.isOpen.set(!this.isOpen());
  }
}

bootstrapApplication(App);

方案说明 #

• 用.collapsible-content基类统一设置过渡规则，和你原来的动画时长、缓动函数完全一致
• 用.open/.closed类分别定义两种状态的样式，1:1匹配原来的动画状态
• 借助Angular信号isOpen()动态切换类名，实现状态切换时的自动平滑过渡

方案二：使用View Transitions API（Angular官方推荐的现代方案） #

如果你需要处理更复杂的动画场景（比如路由过渡、跨元素动画），Angular现在推荐使用原生View Transitions API。这个方案扩展性更强，也能完美适配你当前的折叠展开需求，同时做了浏览器兼容处理。

完整实现代码 #

import 'zone.js';
import { Component, signal, effect, ViewChild, ElementRef } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  standalone: true,
  styles: `
    p {
      overflow: hidden;
    }
  `,
  template: `
    <button type="button" (click)="toggleOpen()">Toggle</button>
    <p #contentEl>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
  `,
})
export class App {
  readonly isOpen = signal(false);
  @ViewChild('contentEl') contentEl!: ElementRef<HTMLParagraphElement>;

  constructor() {
    // 监听信号变化，触发过渡动画
    effect(() => {
      if (!document.startViewTransition) {
        // 兼容不支持View Transition的浏览器
        this.toggleContentState(this.isOpen());
        return;
      }

      // 启动View Transition，创建平滑过渡
      document.startViewTransition(() => {
        this.toggleContentState(this.isOpen());
      });
    });
  }

  toggleOpen() {
    this.isOpen.set(!this.isOpen());
  }

  private toggleContentState(isOpen: boolean) {
    const el = this.contentEl.nativeElement;
    if (isOpen) {
      el.style.height = 'auto';
      el.style.padding = '16px';
      el.style.margin = '16px 0';
      el.style.border = '';
    } else {
      el.style.height = '0';
      el.style.padding = '0 16px';
      el.style.margin = '0';
      el.style.border = '0';
    }
  }
}

bootstrapApplication(App);

方案说明 #

• 用Angular的effect监听信号变化，状态切换时自动触发过渡
• 对支持View Transition的浏览器创建平滑动画，不支持的浏览器直接切换状态
• toggleContentState方法严格匹配你原来的动画状态样式

方案选择建议 #

• 如果你只需要这种简单的折叠展开动画，方案一绝对是首选——代码更简洁、性能更好、无任何依赖
• 如果你有复杂动画需求，或想跟进Angular官方技术路线，方案二的扩展性会更强

内容来源于stack exchange