AngularJS 1.2 - ngAnimate not working
Asked Answered
D

5

24

I am new to using ng-animate with AngularJS 1.2. I am not sure why my ng-animate does not work a certain class name but works with the default for a simple fade in that I saw in an example.

In this example, I try to set my ng-animate class to be 'animation': http://plnkr.co/edit/QWQUUVdcLmzLKRvVibqN?p=preview

but when I use the default, and my class name for animations is just ".ng-enter" and ".ng-leave", the fade in animation seems to work fine.

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

Any help would be greatly appreciated, thanks!

Dissension answered 16/10, 2013 at 1:56 Comment(1)
Dan Wahlin referred to this article when asked for his inputs. Take a look.Liana
C
77

The ng-animate attribute is deprecated in 1.2.

In 1.2 you define the appropriate CSS classes using a special naming convention. If you want a specific name like 'animation', you need to add that class to the element you want to animate.

As long as you have the correct CSS classes, some directives will be animated automatically. Which ones can be found here: http://docs.angularjs.org/api/ngAnimate

This is the reason your animation works in your second example when just defining the ".ng-enter" class. This would however automatically animate all directives that support the enter animation.

I have updated your first example to make it work with the class named 'animation':

HTML:

<li ng-repeat="item in items" class="animation">{{item}}</li>

CSS (Keeping selectors ungrouped for clarity):

.animation {
  -webkit-transition: 1s;
}

.animation.ng-enter {
  opacity: 0;
}

.animation.ng-leave {
  opacity: 1;
}

.animation.ng-enter.ng-enter-active {
  opacity: 1;
}

.animation.ng-leave.ng-leave-active {
  opacity: 0;
}

Plunker: http://plnkr.co/edit/J0qJEMmwdzqXzu733fJf?p=preview

Cutpurse answered 17/10, 2013 at 7:50 Comment(2)
That's workin' syntax! I am using the alert of bootstrap-angular-ui, and this makes an incoming alert fade-in. When I click close it fades out. I anctually want the alert to just show up, and then move to the left off the screen after a certain time. And after that, remove it from the dom, or best call a controller function. Any idea how to approach the dom removing-part?Booker
Depends on your use case. If you are using ng-repeat it will automatically be removed from the DOM when you remove it from the associated collection. Example: plnkr.co/edit/Kp1CjzxYEbVZjvtXyUCO?p=previewCutpurse
R
14

Also important to remember to add the animation module as a dependency to your module definition. Just in case anyone else is having problems getting animations working and hasn't done this.

angular.module('myApp', ['ngAnimate']);
Rox answered 22/8, 2015 at 17:47 Comment(0)
R
9

You must check that the version of your angular.min.js matches with the version of angular-animate.min.js.
I got mine fixed this way.

Rost answered 15/9, 2015 at 18:13 Comment(3)
Thank you for posting this!!! I used npm to install angular-animate and it installed a 1.5 beta version. After replacing that version with a 1.3.8 version animation started working for me.Dermatome
@GaryEberhart : Glad to help !!Rost
Thanks man. Had 1.5.3 for animate and 1.5.0 for angular... What a waste of timeHimalayas
S
0

As Tasse said ng-animate is deprecated, we need to use the class. If you are copying CSS from angularjs web site http://www.nganimate.org/angularjs/ng-repeat/move then you need to modify those CSS in a particular format

For complete detail check Apply Angularjs Animation in 2 minutes

Satiny answered 23/7, 2015 at 23:4 Comment(0)
P
0

This is in addition to accepted answer, for those who are trying to animate an element with ng-show directive. These are styles which must be used:

.animation.ng-hide-remove {
  transition:2s linear all;
  opacity:0;
}

.animation.ng-hide-remove.ng-hide-remove-active {
  opacity:1;
}

Please note, not all angular directives adds ng-enter, ng-enter-active, ng-leave and ng-leave-active. For example, ng-show directive adds ng-hide-remove at the beginning of animation and ng-hide-remove-active at the end of it. For more details follow this link: https://www.w3schools.com/angular/angular_animations.asp

Porett answered 29/9, 2017 at 5:1 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.