Search code examples
angularjsng-animate

AngularJS: fading out an element

I am using ng-animate, I had set it up as a dependency injection. Well, this is not working.

HTML

<p ng-show="atSomeCondition" class="notice">
    Some message.
</p>

CSS

.notice {
    -webkit-transition: all linear 2s;
    transition: all linear 2s;
    opacity: 1;
}

.notice.ng-hide {
    opacity: 0;
}

Any suggestions? Thank you in advance.

Solution

  • What version of angular/angular-animate are you using? I just tried your code in a plunker and it seems to be working fine:

    http://plnkr.co/edit/aMLPgXUMmx5ZNtJfI91W?p=preview

    This plunker uses version 1.4.3.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.min.js"></script>