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
0
votes
1 answer

angular ng-animate causing weird animation on model changed

i am currently using angular 1.2 rc3, i used transition for my ng-repeat items. however, i found that whenever i change my model for the ng-repeat, the transition goes haywired. You'll see the whole list of items pop down and then disappear. What i…
CooKies
  • 33
  • 4
0
votes
1 answer

How to re-apply a directive containing interpolation in AngularJS

Let's say you have a simple animation directive for slide-in: directives.directive('slideIn', function () { return { compile:function (elm) { $(elm).css('padding-left', '200em'); return function (scope, elm,…
Robert Christian
  • 18,218
  • 20
  • 74
  • 89
0
votes
1 answer

Angular.js // ng-leave state before url/ng-view change

Getting into ngAnimations; I was wondering how page transition could completely be controlled. I mean by this : being able to control the same way an ng-leave as it is done for the ng-enter while having a change in the url in the process. New to…
Ben
  • 5,030
  • 6
  • 53
  • 94
0
votes
1 answer

Why is ng-animate not being evaluated?

On Angular 1.2.0-rc2 I have the following setup: http://plnkr.co/edit/t5J5bl?p=preview However, there is no animation happening. Worst than that, the ng-animate is not even being evaluated. Is there anything else I should be including to use the…
Jair Trejo
  • 562
  • 6
  • 10
0
votes
1 answer

Angular 1.2 rc, ngAnimate - is this release viable?

What version of Angular should I really be using here if I want to animate reliably? See the Plunker Update: This was a case of not working on my machine, also the Plunker has been updated to remove a couple issues.
Mark Robbins
  • 2,427
  • 3
  • 24
  • 33
0
votes
2 answers

ngAnimate on ngShow not working

I am trying to execute a animated menu using ngAnimate. home.html
Menu
de-bugged
  • 935
  • 4
  • 14
  • 34
0
votes
1 answer

angular ng-animate directive with ng-show directive

I cant get ng-animate to work with the ng-show directive. Here is a JSBin simplified example: http://jsbin.com/uquzal/1/edit For some reason my CSS classes .show-animation-setup and .show-animation-start are not working. Any ideas? Thanks!
Animal Rights
  • 9,107
  • 6
  • 28
  • 40
0
votes
0 answers

Carousel slide effect with ng hide/show and ng-animate?

I have a slider type carousel with two section containers that can slide left and right. In my developed version I have images inside one section container. The problem I'm experiencing is that because my images from the server take a while to load…
Malcr001
  • 8,179
  • 9
  • 44
  • 57
0
votes
0 answers

ng-animate slide animation misaligned

I've got something working (animation) but it doesn't look pretty. When the animation/slide is triggered. The "leaving" slide pops to the left of the screen and hugs the "entering" slide. It also overshoots the endpoint during animation then…
aozkan
  • 869
  • 2
  • 11
  • 17
0
votes
0 answers

ng-animate calls stack up, execute in later events

The desired behavior is to click on an image, and have the
ease out to full height over 1 second. When the image is clicked again, I need the
to ease back in to hidden state in 1 second. What happens now: Clicking on the image makes the…
Aditya M P
  • 5,127
  • 7
  • 41
  • 72
0
votes
1 answer

Slide left/right with ng-animate in AngularJS

I am really struggling in sliding my content in AngularJS to left/right when left/right button is clicked respectively. I know it can be done with ng-animate, but I am not sure how to do it in my AngularJS code. Below is my code. I'd highly…
Steve
  • 2,546
  • 8
  • 49
  • 94
-1
votes
1 answer

Simple forward and backward CSS animation with Angular ngAnimateSwap directive

I have made a simple swap animation with ng-animate-swap directive, nothing fancy. It works well in forward direction, but fails animating backwards correctly. The problem is, that the entering slide will not be visible before animation ends. Check…
ruuter
  • 2,453
  • 2
  • 30
  • 44
-1
votes
1 answer

How do I animate AngularStrap Collapse

I have a navbar collapse working with AngularStrap, but the collapsing is not animated. I thought I was doing everything correctly by injecting the ngAnimate library and adding the data-animation='am-collapse' attribute to my bs-collapse directive.…
bheussler
  • 1,406
  • 2
  • 15
  • 18
-1
votes
1 answer

ng-animate does not work with ng-repeat

I want my navigation items to be animated when i change the navigation, hence am using 'ng-animate', but no effect is being applied. Here is my code, HTML:
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
-1
votes
1 answer

Can i cross-fade li elements using angularjs ngAnimate

I am trying to understand angularJS and have the following fiddle written, which is a very simple message ticker. The messages are shown by changing the CSS display attribute of one of the li elements.
pcvnes
  • 927
  • 2
  • 15
  • 41
1 2 3
…
43
44