ngAnimate - ngMessages 문제

Question

현재 ngAnimate 및 ngMessages에 문제가 있습니다. 메시지가 나타나면 사라질 때 나는 움직일 수 있습니다.

문서가 나에게 "매우 명확하지 않은"것으로 보이므로 누구나 나를 도울 수 있다면.

여기 내 HTML입니다 :

<div ng-messages="loginError" class="login-error" flex layout layout-align="center center"> 
    <p ng-message="invalid_credentials">Combinaison d'email et de mot de passe <strong>invalide.</strong></p> 
    <p ng-message="could_not_create_token">Impossible de créer le jeton</p> 
    <p ng-message="unknown_error">Erreur inconnue.</p> 
</div> 

을 그리고 여기 내 CSS의 :

.login-error { 
    color: #DD2C00; 
    -webkit-transition: all linear 1s; 
    -moz-transition: all linear 1s; 
    -o-transition: all linear 1s; 
    transition: all linear 1s; 
    max-height: 0; 
    opacity: 0; 
} 

.login-error.ng-active, .login-error.ng-active.ng-active-add-active { 
    max-height: 30px; 
    opacity: 1; 
} 

.login-error.ng-inactive, .login-error.ng-active.ng-inactive-add { 
    max-height: 0; 
    opacity: 0; 
} 

Answer 1

.login-error { 
    color: #DD2C00; 
    -webkit-transition: all linear 0.5s; 
    -moz-transition: all linear 0.5s; 
    -o-transition: all linear 0.5s; 
    transition: all linear 0.5s; 
} 

.login-error.ng-active { 
    max-height: 30px; 
} 

.login-error.ng-inactive { 
    max-height: 0; 
} 

.login-error-msg { 
    -webkit-transition: all linear 0.5s; 
    -moz-transition: all linear 0.5s; 
    -o-transition: all linear 0.5s; 
    transition: all linear 0.5s; 
} 

.login-error-msg.ng-enter { 
    opacity: 0; 
    max-height: 0; 
} 

.login-error-msg.ng-enter-active { 
    opacity: 1; 
    max-height: 30px; 
} 

.login-error-msg.ng-leave { 
    opacity: 1; 
    max-height: 30px; 
} 

.login-error-msg.ng-leave-active { 
    opacity: 0; 
    max-height: 0; 
} 

내 문제를 해결!