Animating angular form

I am using angular 20 and angular material 20.

I have a 2 forms at 2 stages that need to be transitioned between after a delay. I have a common animation I am using for when elements attach and detach. The animation is as follows

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})
])
]);


It works fine when applied to host elements like so

<div class="nav-list">
@if(navState().isLoginVisible){
<app-login @switch-animate></app-login>
}
@if(navState().isRegisterVisible){
<app-register @switch-animate></app-register>
}
@if(navState().isMenuVisible){
}
</div>




but when applied to the forms mentioned above as shown below it animates the scale and opacity on the material input field.

<div class="form">
@if(isStage1()){
<form
@switch-animate
[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>
<div class="form-line margin-bottom">
<mat-form-field class="half-width">
<mat-label>Password</mat-label>
<input
required
matInput
[type]="hidePassword() ? 'password' : 'text'" />
<button
type="button"
(click)="toggleHidePassword($event)"
matIconButton
matSuffix
aria-label="Register Password hider">
<mat-icon>{{hidePassword() ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
</mat-form-field>
</div>
<div class="form-line margin-bottom">
<mat-form-field class="half-width">
<mat-label>Confirm Password</mat-label>
<input
required
matInput
[type]="hideConfirmPassword() ? 'password' : 'text'" />
<button
type="button"
(click)="toggleHideConfirmPassword($event)"
matIconButton
matSuffix
aria-label="Register Confirm Password hider">
<mat-icon>{{hideConfirmPassword() ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
</mat-form-field>
</div>
</form>
}
@if(isStage2()){
<form
@switch-animate
[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>
<mat-form-field class="half-width">
<mat-label>Last name</mat-label>
<input
matInput/>
</mat-form-field>
</div>
<div class="form-line margin-bottom">
<mat-form-field class="half-width">
<mat-label>Gender</mat-label>
<mat-select>
<mat-option value="M">Male</mat-option>
<mat-option value="F">Female</mat-option>
<mat-option value="O">Others</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="form-line margin-bottom">
<div class="half-width center">
<app-image-picker [control]="avatar"></app-image-picker>
</div>
</div>
<div class="form-line margin-bottom">
<mat-form-field class="email">
<mat-label>Email</mat-label>
<input
required
matInput/>
</mat-form-field>
</div>
</form>
}
</div>




the initial load of the form works correctly cause the child animation which is causing the issue is blocked as shown in first gif.

Continue reading...