ng-leave课程没有得到应用

Question

我正在为我的项目使用animate.css和Angular.JS。我创建了一个codepen，你可以在这里找到它：http://codepen.io/SassyCrafter/pen/NrRbmE。以下CSS（PS我正在使用SASS）

.each()

如果你看一下笔，你可以看到当电子邮件无效时，它就会褪色。但是当电子邮件有效并且它应该淡出时它只是暂时保持空闲然后突然消失。任何帮助将不胜感激。

Answer 1

更新2

• 找到更好的解决方案：

替换 -

'use strict';
angular.module('uwApp.controllers', [])
 .controller('mainController', function($scope) {

});

使用 -

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

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

<强>更新

创建了working example from supplied code。

<div class="form-message fade" ng-class="{'in': form.email.$invalid}"> / ng-show适用无法动画的ng-hide。

display: none !important;和fadeIn的类可以一起使用，以使用fadeOut来完成您想要的内容。

替换 -

ng-class

with -

<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}"> scss。