Questions tagged [angularjs-animation]

Official animation module for AngularJS. Animations are achieved by toggling various classes, depending on the element state.

AngularJS provides animation hooks for common directives such as ngRepeat, ngSwitch, and ngView, as well as custom directives via the $animate service. These animation hooks are set in place to trigger animations during the life cycle of various directives and when triggered, will attempt to perform a CSS Transition, CSS Keyframe Animation or a JavaScript callback Animation (depending on if an animation is placed on the given directive). Animations can be placed using vanilla CSS by following the naming conventions set in place by AngularJS or with JavaScript code when it's defined as a factory.

Animations are not available unless you include the ngAnimate module as a dependency within your application.

References:

Guide:

http://docs.angularjs.org/guide/animations

Api doc:

http://docs.angularjs.org/api/ngAnimate

Tutorial

http://docs.angularjs.org/tutorial/step_12

114 questions
45
votes
5 answers

Stop Angular Animation from happening on ng-show / ng-hide

In my AngularJS application I'm using fontawesome for my loading spinners: I'm also using AngularToaster for notification messages which has a dependency on ngAnimate. When I include…
Chris Lees
  • 2,140
  • 3
  • 21
  • 41
21
votes
5 answers

Two different animations for route changes

I have the following case: I'm using the ui-router for the routing in my AngularJS application. In one route, there are five child states for different subscreens. I want to animate the transition between these in a carousel-like manner. The…
Sammy S.
  • 1,280
  • 1
  • 16
  • 31
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

How to perform jQuery animations in AngularJs like fade in and fade out

I'm new to AngularJs so I needed to do the following: I have a div and a button, I want when I click the button to do ajax call and when I finish I want to do: Deleting the div. Or adding new one. I want to learn how to do them both (not…
Dabbas
  • 3,112
  • 7
  • 42
  • 75
6
votes
1 answer

Animating multiple objects simultaneously in AngularJS produces choppy animation

While attempting to create a slideshow that fades images in and out I ran into this problem. What I found is that when doing animations one at a time, they are smooth and seamless. However when doing multiple animations, they become choppy and…
Matt.M
  • 1,039
  • 3
  • 14
  • 21
6
votes
8 answers

How to implement a flip over effect using AngularJS animations?

What would be the best way to achieve a flip over effect using AngularJS animations? I would like the flip over effect to occur on click. Every time it's clicked, it should flip over to the other side. Ideally, I guess, I'm looking for a directive…
Misha Moroshko
  • 166,356
  • 226
  • 505
  • 746
6
votes
1 answer

Angular animate error during loading

I'm developing this angular simple page. I'm using Bower to install components that i need, and the application used to work perfectly. Until I decided to exploit Angular animate library. At first time I used Bower that asked me which "suitable"…
Ivan_nn2
  • 469
  • 7
  • 20
6
votes
1 answer

AngularJS 1.2 ng-show height animation

I'm trying to get a height animation working using Angular JS 1.2. I've got a plunker here that has the animation working for closing the item: http://plnkr.co/edit/YVtnXgjO3Evb6tz5DJOp?p=preview With the key bit being this CSS here: .accordion-body…
Ken Smith
  • 20,305
  • 15
  • 100
  • 147
5
votes
3 answers

Render leaflet map after flexbox calculates height

I am trying to draw a map in a flex child that takes up remaining space. I have a couple headers on top of the main content, and one of the banners is sometimes hidden/removed, so I am using flexbox so that the header can go away without affecting…
lostintranslation
  • 23,756
  • 50
  • 159
  • 262
5
votes
3 answers

Animated sliding div bounces instead of appear/disappear smoothly

I have a navigation bar and a sub-navigation bar in my app. In the sub bar it's possible to press on a button and I want this button to open a new sub bar which will hide the original bar. The new sub bar should slide from behind the main bar and…
Avi
  • 21,182
  • 26
  • 82
  • 121
5
votes
1 answer

Angular fadein and fadeout - the standard way without CSS?

I find it extremely difficult to make an animation in angular, comparing to jquery. There are so many versions of angular animation fadein and fadeout that I found them from blogs/ tutorials/ etc, some of them are on older version of angular.…
Run
  • 54,938
  • 169
  • 450
  • 748
5
votes
2 answers

Animation sequence using AngularJS addClass/removeClass

I'm trying to make an animation sequence by combining calls to addClass/removeClass. After end of the animation method "removeClass" is called to remove the animation and start a new one. But for some reason, nothing happens. I'm trying to figure…
linksta
  • 53
  • 1
  • 1
  • 3
4
votes
1 answer

How to prevent animation from running on element that is initially hidden?

My question is similar to this one and this one, but involves the new animations in AngularJS 1.2.0. Basically, I have a bunch of elements on my signup page that are initially hidden and only displayed when a particular form element is invalid (they…
Decade Moon
  • 32,968
  • 8
  • 81
  • 101
4
votes
1 answer

AngularJS : Directive : Animate sliding pages and postpone controller binding

I'm trying to figure out how to postpone the default controller binding and only apply it from within the directive, once the specific animation (custom - not the angularjs one) has been performed on the DOM element with the content. The fiddle to…
Spencer Mark
  • 5,263
  • 9
  • 29
  • 58
3
votes
3 answers

How to trigger an angularjs animation from a controller method?

I would like to trigger an angular animation from a controller method. I have come up with something that I am not satisfied with (see code below). The issue is that for my animation to work, I need to track the state of a $scope variable i.e.…
balteo
  • 23,602
  • 63
  • 219
  • 412
1
2 3 4 5 6 7 8