Maximilian Lloyd Maximilian Lloyd - 5 months ago 19
CSS Question

ng-leave class not getting applied

I am using animate.css and Angular.JS for my project. I have created a codepen which you can find here: http://codepen.io/SassyCrafter/pen/NrRbmE. The following CSS (PS i am using 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;
}
}


If you have a look at the pen you can see that when the email is not valid, it fades in like it should. But when the email is valid and it is supposed to fade out it simply stays idle for a bit then abruptly disappears. Any help would be appreciated.

Answer

Update 2

  • Found better solution:

Replace -

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

With -

<div class="form-message fade"
  ng-class="{'in': form.email.$invalid}">
  • Updated example
  • Side note: Looking at my provided example, try pressing submit. You will notice that Bootstrap already applies a tooltip validation summary to invalid fields. Consider using this instead since it is built-in functionality of Bootstrap. More info.

Update

Created working example from supplied code.


ng-show/ng-hide applies display: none !important; which cannot be animated on.

The classes of fadeIn and fadeOut can be used together to accomplish what you want instead using ng-class.

Replace -

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

with -

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

And remove your &.ng-leave scss.