css - ng-leave 类没有得到应用

Question

我正在为我的元素使用 animate.css 和 Angular.JS。我创建了一个代码笔，您可以在这里找到它:http://codepen.io/SassyCrafter/pen/NrRbmE .以下 CSS(PS 我使用的是 SASS)

.form-message {
  position: absolute;
  .message {
    position: absolute;
    color: white;
    background: orange;
    padding: 5px;
    position: absolute;
    white-space: nowrap;
    border-radius: .20rem;
    z-index: 1001;
  }

  &.ng-leave {
    animation: fadeOut 300ms;    
  }
}

如果你看一下笔，你会发现当电子邮件无效时，它会像它应该的那样淡入。但是，当电子邮件有效并且应该淡出时，它只是闲置一会儿然后突然消失。任何帮助将不胜感激。

Answer 1

更新 2

• 找到更好的解决方案:

替换 -

<div class="form-message animated"
  ng-class="{'fadeIn': !emailForm.email.$valid,
             'fadeOut': emailForm.email.$valid}">

与 -

<div class="form-message fade"
  ng-class="{'in': form.email.$invalid}">

• 更新示例
• 旁注:查看我提供的示例，尝试按提交。您会注意到 Bootstrap 已经将工具提示验证摘要应用于无效字段。考虑改用它，因为它是 Bootstrap 的内置功能。 More info.

---

更新

已创建 working example from supplied code .

---

ng-show/ng-hide 应用 display: none !important; 不能动画。

fadeIn 和 fadeOut 类可以一起使用来完成您想要的，而不是使用 ng-class。

替换 -

<div class="form-message animated fadeIn" ng-show="!emailForm.email.$valid">

与 -

<div class="form-message animated"
  ng-class="{'fadeIn': !emailForm.email.$valid,
             'fadeOut': emailForm.email.$valid}">

并删除你的 &.ng-leave scss。