Angular 20中表单切换动画导致Material输入框异常触发动画的问题

我完全理解你遇到的困扰——这个切换动画在作用于独立组件（比如app-login、app-register）的宿主元素时表现正常，但一旦应用到包含Angular Material表单控件的<form>标签上，内部的mat-input等子元素就会意外触发缩放和透明度动画，这显然不是你想要的效果。

问题根源分析 #

你的switch-animate动画核心逻辑是通过query(':enter')和query(':leave')匹配所有进入/离开的子元素：

export const switchTrigger = trigger('switch-animate', [
  transition('* => *', [
    query(':leave', [
      style({opacity: 1, transform: 'scale(1)'}),
      animate('100ms ease-in', style({opacity: 0, transform: 'scale(0.9)'}))
    ], {optional: true}),
    query(':enter', [
      style({opacity: 0, transform: 'scale(0.9)'}),
      animate('100ms ease-in', style({opacity: 1, transform: 'scale(1)'}))
    ], {optional: true})
  ])
]);

当把这个动画直接加在<form>标签上时，表单内部的所有Material表单控件（比如mat-form-field、input）会被视为“进入”的子元素，动画效果会被传递给这些子元素，导致它们也执行缩放和透明度变化。而之前在组件宿主上使用时，组件内部的DOM有Angular封装机制，或者初始化时内部元素已存在，query没有匹配到需要动画的子元素，因此只有组件宿主本身执行动画。

解决方案 #

这里提供两种简单有效的解决方式，你可以根据自己的偏好选择：

方案1：修改动画逻辑，仅作用于目标元素本身（推荐）

去掉query查询子元素的逻辑，直接针对元素自身的:enter和:leave状态定义动画，这样就不会影响任何子元素：

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

export const switchTrigger = trigger('switch-animate', [
  transition(':enter', [
    style({ opacity: 0, transform: 'scale(0.9)' }),
    animate('100ms ease-in', style({ opacity: 1, transform: 'scale(1)' }))
  ]),
  transition(':leave', [
    style({ opacity: 1, transform: 'scale(1)' }),
    animate('100ms ease-in', style({ opacity: 0, transform: 'scale(0.9)' }))
  ])
]);

修改后，无论你把动画应用到<form>标签还是它的父容器上，都只会有容器/表单本身执行切换动画，内部的Material输入框不会再被影响。

方案2：将动画应用到表单的父容器而非form标签

如果你不想修改动画逻辑，可以把动画移到表单的外层容器上，利用容器隔离动画的作用范围，避免内部子元素被query匹配到：

<div class="form">
  @if(isStage1()){
    <div @switch-animate>
      <form [formGroup]="registerFormStage1">
        <div class="form-line margin-bottom">
          <mat-form-field class="username">
            <mat-label>Username</mat-label>
            <input required matInput/>
          </mat-form-field>
        </div>
        <!-- 其他表单控件 -->
      </form>
    </div>
  }
  @if(isStage2()){
    <div @switch-animate>
      <form [formGroup]="registerFormStage2">
        <div class="form-line margin-bottom">
          <mat-form-field class="half-width">
            <mat-label>First name</mat-label>
            <input required matInput/>
          </mat-form-field>
          <!-- 其他表单控件 -->
        </div>
      </form>
    </div>
  }
</div>

效果验证 #

测试任意一种方案后，你会发现表单切换时只有容器/表单本身执行缩放和透明度动画，内部的Material输入框会保持正常的初始状态，不会再出现异常的动画效果。

内容来源于stack exchange