Как добавить переход к этому div

Question

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

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

ts file

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

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

Сценарий добавляет div при отправке формы и если условие ng if истинно и показывает ошибку внутри диапазона.Две функции в вышеуказанном 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

Вы можете использовать angular-animations для анимации сообщения об ошибке: 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()
    ]
})