Angular中如何在:enter动画结束后保留状态？

你的问题根源在于两个关键错误：

1. state 配置位置完全错误 #

你把state写在了transition的步骤数组里，这违反了Angular动画的结构规则。state是trigger的直接子级配置项，必须和transition同级，不能嵌套在transition内部。Angular会直接忽略transition内的state定义，自然无法实现状态保留。

2. 动画目标与状态的关联不匹配 #

你通过query('.form')给内部元素添加动画，但state是定义在父元素的trigger上的，父元素的状态不会自动同步到内部的.form元素。要么把状态样式直接绑定到父元素，要么在state中通过query指定内部元素的持久化样式。

正确实现方式 #

方案1：用state管理内部元素的持久化状态

将state移到trigger顶级，并在state中通过query设置.form的样式：

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

trigger('myAnimation', [
  // state与transition同级，正确定义状态样式
  state('true', query('.form', style({ opacity: 1, top: '100px' }))),
  state('false', query('.form', style({ opacity: 0, top: '0' }))),

  // 从false到true的过渡动画
  transition('false => true', [
    query('.form', [
      style({ opacity: 0, top: '0' }),
      animate('1000ms ease-in', style({ opacity: 1, top: '100px' }))
    ])
  ]),
  // 可选：添加从true到false的退出动画
  transition('true => false', [
    query('.form', [
      animate('1000ms ease-out', style({ opacity: 0, top: '0' }))
    ])
  ])
])

对应的HTML保持状态绑定：

<div [@myAnimation]="showForm">
    <div class="form">....</div>
</div>

方案2：简化逻辑，依赖动画默认的状态保留

如果不需要复杂的状态切换，也可以去掉state，利用Angular动画默认的fillMode: both特性（会保留动画最终状态），同时添加入场和退场过渡：

trigger('myAnimation', [
  transition(':enter', [
    query('.form', [
      style({ opacity: 0, top: '0' }),
      animate('1000ms ease-in', style({ opacity: 1, top: '100px' }))
    ])
  ]),
  transition(':leave', [
    query('.form', [
      animate('1000ms ease-out', style({ opacity: 0, top: '0' }))
    ])
  ])
])

HTML可选择用*ngIf（元素随状态销毁/创建，动画状态自然保留）：

<div @myAnimation *ngIf="showForm">
    <div class="form">....</div>
</div>

额外提示 #

• 样式中的top值建议带上单位（如100px），避免浏览器解析异常。
• 使用query时，可添加{ optional: true }参数，防止元素未找到时抛出错误：query('.form', [...], { optional: true })

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