ngAnimate - Issue with ngMessages - angularjs

Question

I get an issue with ngAnimate and ngMessages currently. I am able to animate when the message appear but not when it disappear.
If anyone can help me on this because the documentation don't seems very "clear" to me.
Here's my 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>
And here's my 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;
}
Solved my issue !