Angular动画：如何从终点反向执行而非从头重启（元素不离开DOM）

因为元素始终留在DOM中，无法依赖:enter/:leave触发器，我们可以通过自定义状态变量来控制动画的正向/反向播放，无需依赖元素的DOM生命周期。

步骤1：定义带双向状态的动画触发器 #

将原有的:enter过渡替换为基于自定义状态的双向过渡，分别定义正向（从初始到终点）和反向（从终点到初始）的动画序列：

trigger('zoomAndMove', [
  // 定义初始状态（对应原动画的起点）和终点状态
  state('initial', style({
    'background-size': '150%',
    'background-position': '95% center',
  })),
  state('final', style({
    'background-size': '200%',
    'background-position': '20% 150%',
  })),

  // 正向动画：从初始到终点，和原动画序列一致
  transition('initial => final', [
    animate(
      '6s ease-in-out',
      style({
        'background-size': '150%',
        'background-position': '90% center',
      })
    ),
    animate(
      '6s ease-in-out',
      style({
        'background-size': '170%',
        'background-position': '10% 20%',
      })
    ),
    animate(
      '6s ease-in-out',
      style({
        'background-size': '200%',
        'background-position': '20% 150%',
      })
    ),
  ]),

  // 反向动画：从终点到初始，完全镜像正向序列的时长和缓动
  transition('final => initial', [
    animate(
      '6s ease-in-out',
      style({
        'background-size': '170%',
        'background-position': '10% 20%',
      })
    ),
    animate(
      '6s ease-in-out',
      style({
        'background-size': '150%',
        'background-position': '90% center',
      })
    ),
    animate(
      '6s ease-in-out',
      style({
        'background-size': '150%',
        'background-position': '95% center',
      })
    ),
  ]),
]),

步骤2：在组件中控制状态切换 #

在组件类中定义状态变量，通过按钮或其他事件触发状态切换，实现动画反向播放：

// 组件类中
animationState = 'initial';

// 触发正向播放
playForward() {
  this.animationState = 'final';
}

// 触发反向播放（从终点回到起点）
playReverse() {
  this.animationState = 'initial';
}

步骤3：模板中绑定动画状态 #

在DOM元素上绑定动画触发器和状态变量：

<div [@zoomAndMove]="animationState" class="your-element-class"></div>
<button (click)="playReverse()">反向播放</button>

关键说明 #

• 自定义状态initial和final分别对应动画的起点和终点，完全脱离元素的DOM生命周期，适合元素始终存在的场景。
• 反向动画的序列完全镜像正向动画的步骤，确保过渡的流畅性和对称性。
• 状态切换时，Angular会自动识别过渡方向并执行对应的动画序列，无需手动控制动画的播放进度。

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