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;
}

解决了我的问题！