如何向此 div 添加过渡

Question

.login-error {
    text-align: center;
    margin-bottom: 15px;
}

.login-error span {
    background: #e03030;
    padding: 2px 28px 2px 28px;
}

ts 文件

focusPasswordInput() {
    this.loginForm.controls.password.markAsUntouched();
}

focusEmailInput(){
    this.loginForm.controls.email.markAsUntouched();
}

该脚本在提交表单时添加一个 div，如果 ng if 条件为真，并在 span 内显示错误。如果用户在单击按钮提交表单后将焦点放回输入框内，则上述 ts 文件中的两个函数会隐藏错误消息。 它适用于错误 div 隐藏和显示，但它看起来并不漂亮所以有没有办法添加过渡？

<div *ngIf="(loginError && loginForm.controls.email.touched) && (loginForm.controls.password.touched) " class="login-error">
   <span>Email or Password incorrect</span>
</div>
<input type="text" formControlName="email" name="email" (focus)="focusEmailInput()" placeholder="email *"/>
<input type="text" formControlName="password" (focus)="focusPasswordInput()" placeholder="Password *"/>

Answer 1

您可以使用角度动画为错误消息设置动画：https://www.npmjs.com/package/angular-animations

<div [@zoomInOnEnter]
    [@zoomOutOnLeave]
    *ngIf="(loginError && loginForm.controls.email.touched) && (loginForm.controls.password.touched)"
    class="login-error">
    <span>Email or Password incorrect</span>
</div>

记得在 .ts 文件中添加函数定义：

@Component({
    selector: '...',
    templateUrl: '...',
    styleUrls: ['...'],
    animations: [
        zoomInOnEnterAnimation(),
        zoomOutOnLeaveAnimation()
    ]
})