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

Make sure DOM changes are finished before transition

Short version When ui-router transitions to a new view (using ngAnimate in some way that I don't fully understand), it adds the classes ng-leave and ng-leave-active to the the current view. It also adds the classes ng-enter and ng-enter-activeto the…
Anton Gildebrand
  • 3,641
  • 12
  • 50
  • 86
5
votes
1 answer

Apply a state class to ui-view to allow different ng animation

I need to apply different animations depending on the current state using ui-view. Following on from this question.. I have the following code (edit: see plunker preview)
stateClass gets applied in…
williamsowen
  • 477
  • 1
  • 7
  • 22
5
votes
0 answers

callback when ui-view animation is done

I'm using angular in an app together with ui-router. I wish to be able to execute some code, when the animation of the ui-view is complete. I've read that $stateChangeSuccess should be able to achieve this, but it seems to fire before each…
Michael Falck Wedelgård
  • 2,943
  • 1
  • 27
  • 39
5
votes
1 answer

Can't trigger animation on nested ngRepeat

I can't figure out how to trigger animations on a nested ngRepeat with Angular. The CSS class ".test" is animated. When using ".test" on the inner ngRepeat it doesn't work (Plunker):
Pipo
  • 5,623
  • 7
  • 36
  • 46
5
votes
2 answers

uncaught object error: can't inject ngAnimate

I can't instantiate my app when I try to inject 'ngAnimate' like so: var app = angular.module('musicsa', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ui.router', 'firebase', 'ngAnimate' ]) I get an error Uncaught object from angular.js…
Connor Leech
  • 18,052
  • 30
  • 105
  • 150
5
votes
1 answer

Angular ngAnimate causes width animations to jump

I am using Angular with ngAnimate for a couple of cases. In another, I have a directive that is changing the width of the column (using Bootstrap col-md-* classes) and a simple transition that looks like this: .column-view .column { transition:…
Brian Genisio
  • 47,787
  • 16
  • 124
  • 167
5
votes
1 answer

ngAnimate, addClass callback doesn't run after animation ended

I dont understand why the callback gets called right away, without any delay, i've read the doc it says that it parses the css to retrieve the transition duration. but it doesn't seem to work, here is my code : this is my slide directive : 'use…
popo joe
  • 910
  • 1
  • 9
  • 24
5
votes
4 answers

Strange error in angular-animate.js

I try to use ngAnimate module to create a simple animation. The problem is that every time I try to just include this module as a dependency I got this error: Error: Unknown provider: $animateProvider from ngAnimate. The code is very simple, but I…
Roman Dryndik
  • 1,167
  • 1
  • 13
  • 34
4
votes
0 answers

Angular 6 - Animation does not transition. It just jumps directly to state

I am trying to get two animations to activate at the same time. It's a big project, so I will only display the Component's HTML and Typescript files in question. The first animation is to fade in an opaque black overlay. That works perfectly fine.…
Chosen1
  • 279
  • 4
  • 18
4
votes
2 answers

ng-show doesn't keep up with ng-animation for scaling down in a dropdown

I have a dropdown that I want a scaling down animation to show when the dropdown opens and closes. I have a CODEPEN here with the code for you to experiment in. I slowed it down to a 10 sec animation (not the final speed obviously) just for you to…
LOTUSMS
  • 10,317
  • 15
  • 71
  • 140
4
votes
1 answer

Disable ng-animate globally and then enable on some elements

Using Angular 1.5.3, is it possible to globally disable ng-animate and then selectively enable it on some elements? I have a directive (ng-animate-enabled) used to enable ng-animate on the container div and it's children. If I globally disable…
rmirro
  • 61
  • 5
4
votes
2 answers

ngAnimate only degrades partially in IE9

I've modified code from this tutorial which animates a sliding div so that it works as a toggling menu. I was hoping it would degrade into normal hide-show in IE9. Which it is. But only one time. If I click the first button, it will toggle its div…
1252748
  • 14,597
  • 32
  • 109
  • 229
4
votes
1 answer

How to add animation to angularjs uib-alert directive

I want to add fade-in animation for new alerts pushed into array and fade-out for dismissed alerts. Alerts are dismissed automatically after 5 seconds. I've already included angular-animate ui-bootstrap and ui-bootstrap-tpls libraries. How can i get…
Cankut
  • 667
  • 1
  • 9
  • 22
4
votes
2 answers

ng-show does not work correctly with ng-animate

When animate module is loaded then ng-show does not work. Default value for ng-show expression is false, but element is still shown and class ng-hide is missing. If i unload animate module, then it works fine.