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
7
votes
2 answers

ng-animate not working in 1.3

I am getting the class ng-animate applied to the directive but I'm not getting: ng-hide-remove.ng-hide-remove-active or .ng-hide-remove.ng-hide-remove-active I have angular and angular-animate 1.3 loaded. and am including ngAnimate in app.js
chovy
  • 72,281
  • 52
  • 227
  • 295
7
votes
1 answer

AngularJS $animate.enter not adding ng-enter and ng-enter-active classes

I'm trying to incorporate the $animate service into my own directive. I can't get enter and leave to actually animate. The weird thing is that using $animate.enter, the element is appended to the DOM, and the callback function fires. But it seems…
drukepple
  • 364
  • 1
  • 4
  • 8
7
votes
1 answer

Using AngularJS' ngAnimate when removing an item from scope

Very simple question: In AngularJS 1.2.x, is it possible (and how) to get ngAnimate to fire when removing an item from scope? Here's an example Plunker: http://plnkr.co/edit/tpl:FrTqqTNoY8BEfHs9bB0f?p=preview Code: …
JVG
  • 20,198
  • 47
  • 132
  • 210
6
votes
1 answer

Angular not updating ng-class on ng-view

I'm using angular 1.6.5 for my angular application and came across a very strange behavior. The thing I want to achieve is: when ngroute is being changed, I must remove active class from current view, wait for leave animation to complete, then add…
gogachinchaladze
  • 1,064
  • 1
  • 8
  • 19
6
votes
1 answer

ngRepeat Animation in angular 1.4

i am tying to achieve an Animation in Angular JS 1.4.0, which i'd like to be similar to the one, which can be found on this page (Angular 1.1.5): http://www.nganimate.org/angularjs/ng-repeat/move As I understand, there have been major changes to…
kacase
  • 1,993
  • 1
  • 18
  • 27
6
votes
4 answers

Fade animation between state transitions in ui-router

I am using ui-router in my web application. Root div code is:
When I go from one state to another (/orders to /feedbacks in the screenshot below), the first state doesn't hide before the new state's…
Burak
  • 5,706
  • 20
  • 70
  • 110
6
votes
1 answer

Angular 1.3 animation not working in firefox

We have an ng-repeat directive which uses ng-hide to do an animated show and hide based on a selected index. The animations work correctly in all browsers except Firefox. In Firefox the animation for .ng-hide-remove is not working. You can see…
Chris Mullins
  • 6,677
  • 2
  • 31
  • 40
6
votes
3 answers

Jerky interrupted CSS transitions with ngAnimate on Chrome

I've noticed that with ngAnimate loaded CSS transitions are "jerky" on Chrome when interrupted with another transition. That is, they seem to jump ahead to the target state, rather than start from the current value. The exact same transitions are…
Michal Charemza
  • 25,940
  • 14
  • 98
  • 165
6
votes
2 answers

Angular animate not working correctly on first run when element is initially hidden

I am wiring up a status bar on my angular app, the purpose is when a request is made to the server the bar will show the response message, will have a background colour to denote success or error, and if it was successful to hide after a few…
user1618236
6
votes
1 answer

Angular 1.2.5 nested animations

Using ng-view, I would like a simple fadeIn / fadeOut for page transitions. However, in different "views" I have child elements that I would like to animate at the same time as the fadeIn/fadeOut are happening on the parent element. The problem…
Ben
  • 291
  • 1
  • 3
  • 16
6
votes
2 answers

Leave animation on ng-include with dynamic source

I have a ng-include which is loading content based on a dynamic url (working as expected). The problem comes when I'm trying to animate the enter and leave of the content…
JT703
  • 1,311
  • 4
  • 17
  • 41
6
votes
2 answers

Animations in AngularJS ng-show

I'm trying to get an ng-show element to animate when it becomes visible/hidden. But it just acts like a normal ng-show, instand show/hide. I found this example: http://jsfiddle.net/Kx4TS/1/ which works fine. yet, if I use the same ng-animate…
Roger Johansson
  • 22,764
  • 18
  • 97
  • 193
6
votes
2 answers

Angularjs ng-animate + css transition for sliding effect

I'm trying to achieve sliding effect with the new ng-animate feature of Angular. I've taken some code from the demo site and have prepared a fiddle. The problem is that elements below the sliding DIV keeps shifting up and down when the item is being…
Bhavesh
  • 93
  • 1
  • 2
  • 5
5
votes
1 answer

Angular/CSS - Animate shifting of content when new elements are dynamically added

Angular animation noob here. I can successfully animate content onto the page using ngAnimate. However, when my new content slides in, all of the content below it jumps down to its new position. Likewise, when the new content is removed the…
Benny B
  • 357
  • 1
  • 3
  • 13
5
votes
1 answer

Ng-animate stopped working using $templateRequest decorator

I was trying to avoid template errors with angular js when my user became unauthenticated. To do this, I came to this stackoverflow solution. It worked for me, but now I noticed that my ng-animate stopped working without throwing console…
William Weckl
  • 2,435
  • 4
  • 26
  • 43
1 2 3
…
43 44