ngAnimate - Problem mit ngMessages

Question

Ich bekomme ein Problem mit ngAnimate und ngMessages derzeit. Ich kann animieren, wenn die Nachricht erscheint, aber nicht, wenn sie verschwindet.

Wenn mir jemand dabei helfen kann, weil mir die Dokumentation nicht sehr "klar" erscheint.

Hier ist mein 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> 

Und hier ist mein 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; 
} 

mein Problem gelöst!