Stack Overflow
Stack Overflow

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

Live search in AngularJS: updating the results

I want a live search: the results are queried from web api and updated as the user types. The problem is that the list flickers and the "No results" text appears for a fraction of second, even if the list of results stays the same. I guess I need to…
Andrey Moiseev
  • 3,914
  • 7
  • 48
  • 64
3
votes
0 answers

Angular js ui router animated transitions

Is there a standard way to do animations in angular ui router transitions? I'm looking for sliding animations when UI-view changes.
Harry
  • 52,711
  • 71
  • 177
  • 261
3
votes
2 answers

AngularJS .ng-enter animation doesn't work on first run

I'm have a strange problem in my AngularJS app; Animation in my tab-slides switching with ng-include, doesn't work for first time, but works good in second or third time. Here is my test code on plunker:…
Anton Konyushevskiy
  • 302
  • 1
  • 13
3
votes
1 answer

AngularJS - animating items from one container into another container

I have two divs, one starts empty, the other has some predefined items. On clicking items in one list, the other list gets items added to it. What I would like to achieve is to animate items from one list to appear to physically move to the other.…
SoluableNonagon
  • 11,541
  • 11
  • 53
  • 98
3
votes
1 answer

AngularJS animate on children element works 1st time, 2nd fails

I'm having a weird issue here with angular animation. I'm doing an animation that transitions between screens and changes the direction depending on the "depth" of the screen. There tricky part is that there's two parts, one static and one moving,…
fernandopasik
  • 9,565
  • 7
  • 48
  • 55
3
votes
1 answer

Fade out element completely before fading another in

As you can see from this jsfiddle: http://jsfiddle.net/robcampo/pWGuS/ I'm trying to fade out an element and fade another in using Angular animations. The fading (using opacity and transitions) works. However, as you'll see, it displays the…
Rob Campion
  • 1,359
  • 13
  • 26
3
votes
1 answer

Make a smooth animated css3 rotated div with angularjs

Thats my fiddle: http://jsfiddle.net/7kLde/48/ The rotation of the div is rather a flip... not a smooth rotation. I use the latest version of angularjs 1.2 rc3. Considering the new animate capabilities of the latest angularjs how do I have to…
Elisabeth
  • 20,496
  • 52
  • 200
  • 321
2
votes
0 answers

Calling a jqLite function inside a AngularJS directive

I need to call the jqLite slideToggle function inside a AngularJS directive to animate the collapsing of each content-box. I want to slideDown/slideUp the following div..
Content
..by clicking…
Codehan25
  • 2,704
  • 10
  • 47
  • 94
2
votes
1 answer

CSS animation appears on top while animation is running

I have a css animation that make an error message box appear above a form when the user presses the validation button (and the input field is invalid). The issue I have is while the animation is running, the message box appears on top of the form.…
Florent
  • 391
  • 1
  • 12
2
votes
1 answer

AngularJS: Why are the animation classes not appended during ng-hide/show transition

I'm trying to do some animation work, but for some reason the appropriate classes aren't appended during a ng-show / ng-hide transition. I've attached this animation showing that they aren't being attached. What am I doing wrong? I should mention…
ymerej
  • 727
  • 1
  • 8
  • 21
2
votes
1 answer

How to make Angular ng-switch animate(enter/leave) in more than one way?

I write an angular directive called 'cardViewer', which can show images inside it with animation. When you press "prev" button, image slides left. When you press "next" button, image slides right. I try to do this with ng-switch, which only supports…
Opass
  • 79
  • 1
  • 8
2
votes
0 answers

AngularJS Animation Breaking `position: fixed` Element in Chrome

Working in Chrome, I found the AngularJS animations appear to break elements that have position: fixed applied to them. I can not reproduce the issue in Safari or Firefox. I'm unsure if I'm doing something wrong, or if I could be doing something…
Nicholas Pappas
  • 10,439
  • 12
  • 54
  • 87
2
votes
2 answers

using ng-switch and ng-repeat for a slider

I can't make this kind of slider work, taking data from the controller. This example works fine:
cor
  • 3,323
  • 25
  • 46
2
votes
2 answers

Dynamic ng-hide?

I'm trying to hide div based on input. Its a list with a id so currently my div looks like:
this outputs: 'hide'-1 in the ng-hide. I've tried removing the '' but then it does not work. The…
Jason94
  • 13,320
  • 37
  • 106
  • 184
2
votes
1 answer

Angular - animate ng-show

I've this simple HTML markup using Angular and Bootstrap: Toggle panel:

…
dhrm
  • 14,335
  • 34
  • 117
  • 183
1
2
3 4 5 6 7 8