Stack Overflow
Stack Overflow

Questions tagged [ng-animate]

The ngAnimate module provides support for CSS-based animations (keyframes and transitions) as well as JavaScript-based animations via callback hooks. Animations are not enabled by default, however, by including ngAnimate then the animation hooks are enabled for an AngularJS app.

Usage

Simply put, there are two ways to make use of animations when ngAnimate is used: by using CSS and JavaScript. The former works purely based using CSS (by using matching CSS selectors/styles) and the latter triggers animations that are registered via module.animation(). For both CSS and JS animations the sole requirement is to have a matching CSS class that exists both in the registered animation and within the HTML element that the animation will be triggered on.

Reference - AngularJS ngAnimate docs.

Tutorial - How to use AngularJS with NgAnimate

Github - https://github.com/angular/angular.js/tree/master/src/ngAnimate

NPM package - https://www.npmjs.com/package/ng-animate

From Wikipedia

ng-animate

A module provides support for JavaScript, CSS3 transition and CSS3 keyframe animation hooks within existing core and custom directives.

Since ng-* attributes are not valid in HTML specifications, data-ng-* can also be used as a prefix. For example, both ng-app and data-ng-app are valid in AngularJS.

648 questions
98
votes
9 answers

disable nganimate for some elements

I'm using the ngAnimate module, but all my ng-if, ng-show, etc, are affected by that, I want to leverage ngAnimate for some selected elements. For performance and some bugs in elements that shows and hide very speedy. thanks.
drtobal
  • 1,005
  • 1
  • 7
  • 7
36
votes
8 answers

How can I use ng-animate with ui-view rather than ng-view?

I am using angular-ui-router with angularJS v1.2 and would like to implement custom page transitions. How can I use ng-animate with ui-view (from angular-ui-router) rather than ng-view (which would be the standard way)? See Remastered Animation in…
Per Quested Aronsson
  • 11,380
  • 8
  • 54
  • 76
30
votes
3 answers

ng-animate : Animation when model changes

I have created a table in which user can increase and decrease the value. See the Fiddle //sample code as its not allowing me to push the link to JSFiddle with out pasting code // css -…
Anand
  • 14,545
  • 8
  • 32
  • 44
25
votes
3 answers

Running code after an AngularJS animation has completed

I have an element whose visibility is toggled by ng-show. I'm also using CSS animations - the automatic ones from ng-animate - on this element to animate its entry. The element will either contain an image or a video. In the case that the element…
Ed_
  • 18,798
  • 8
  • 45
  • 71
24
votes
5 answers

AngularJS 1.2 - ngAnimate not working

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…
changus
  • 763
  • 2
  • 10
  • 25
23
votes
1 answer

ng-Animate not working for a Hide and Show setting

I'm using AngularJS version 1.2.11. I've set a toolbar to slide in and out with a transition using ng-Animate (show and hide). Here is the HTML:
…
Sandeep
  • 233
  • 1
  • 2
  • 5
22
votes
2 answers

ng-animate with ng-class directive

You can use ng-animate with ng-class with the add and remove animations. I'm looking to make one animation in CSS3 but haven't found good examples with ng-class online. So I was wondering if people have good examples they want to share. I am not…
NicolasMoise
  • 7,261
  • 10
  • 44
  • 65
22
votes
2 answers

How to delay ngAnimate in ngRepeat

When using ngAnimate to fade in each item in ngRepeat, currently all items fade in at the same time. Is it possible for each item to fade in after the previous item has faded to e.g. 50% resulting in a cascading effect?
20
votes
2 answers

How to use ng-animate in angular 1.2?

Base angular 1.1.5 - http://plnkr.co/edit/eoKt8o4MJw9sWdYdeG3s?p=preview - WORKS Upped angular 1.2.6 - http://plnkr.co/edit/WopgAtFNVm1mKf5Li99h?p=preview - FAIL I think I did follow the instructions from the docs -…
Mars Robertson
  • 12,673
  • 11
  • 68
  • 89
19
votes
1 answer

Angular ngAnimate throws error

I'm trying to do some animations with ngAnimate but I cannot even get started with it. The problem is when i try to add my ngAnimate dependency to the app file it throws me this error in console and my app is not working. Uncaught Error:…
Syed Sehu Mujammil A
  • 875
  • 2
  • 9
  • 21
19
votes
2 answers

Ng-animate does not add the ng-enter and ng-leave classes

This is my first project working with Angular and i have some troubles with ng-animate. I did a couple of tutorials and in the tutorials i got everything working fine. Now i'm using Angular for a project and i just can't get ng-animate to work…
Frank Biemans
  • 203
  • 1
  • 2
  • 4
18
votes
2 answers

List reorder animation with angularjs

I'm working on a project in angularjs that has a list of objects which update in real time and will be reordered with each update. I want to animate these objects moving smoothly from their starting to their end positions, so for example when the…
Patrick Thill
  • 225
  • 2
  • 10
17
votes
1 answer

quick leave and enter cause multiple element in angular ng-if animation

there is a ng-if animation example in this doc:https://docs.angularjs.org/api/ng/directive/ngIf if you clicking the checkbox quickly and repeatedly,you will find more than one element will be displayed,I don't know how to avoid it.
fenyiwudian
  • 470
  • 3
  • 12
15
votes
3 answers

Angular ng-animate 1.3.* Causes to unexpected behavior to ng-class inside directive

I'm in the middle of the transition from version 1.2.* to 1.3.* , and I came across a very strange and critical bug. In my application I have a very simple directive contain a template with ng-class (with condition to scope property) for some…
cheziHoyzer
  • 4,803
  • 12
  • 54
  • 81
15
votes
3 answers

angularjs chained fade-in / fade-out transition

I have looked at the official show/hide transition example at the bottom of this page... http://docs.angularjs.org/api/ng.directive:ngShow I have tried to modify it to get a seemless fade transition (transition: opacity 0.5s ease-in-out) from one…
user2754486
  • 311
  • 1
  • 2
  • 9
1
2 3
…
43 44