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
1
vote
2 answers

angularjs user feedback message on form submission

I have a simple AngularJs app (a form) and after user submit some data, I need to show a confirmation message. I need to show the message on a popup like on this page http://ng-admin.marmelab.com/#/posts/edit/12 (click on the Submit button at the…
grandcoder
  • 41
  • 10
1
vote
2 answers

How to disable animations for changes in dataset for ng-repeat in Angular Material?

I'm using Angular Material 1.0.1 library, but I don't want DOM elements' removal to be delayed when using ng-repeat. When the dataset changes, elements stick around for a little bit more and it looks like the page is lagging. I found out that…
Gregor Eesmaa
  • 1,206
  • 1
  • 14
  • 22
1
vote
1 answer

AngularJS animate element disappearing

in the example below you can see that when item is added to the list it is doing the fade animation and then disappearing, I want it to have bootstrap style after animation, It is probably conflicting with bootstrap css but I can't figure out which…
Koten
  • 599
  • 2
  • 5
  • 13
1
vote
3 answers

Nested list is cut off by parent list element after slide animation

I'm building an Ionic app with nested lists of comments. I need to animate replies as child elements and retain state. Currently I'm using a simple directive with jQuery slideToggle, but this doesn't retain state (and isn't "the Angular way"). This…
isherwood
  • 58,414
  • 16
  • 114
  • 157
1
vote
1 answer

angularui tabs setting active tab and its css

I am currently having issues styling an angular directive of tabs. I am trying to set an active tab and deselect all other tabs. However, I am not having any luck. I have tried using css hosted by bootstrap, but that didn't fix the issue. I am…
Sari Rahal
  • 1,897
  • 2
  • 32
  • 53
1
vote
2 answers

Accessing and updating controller model within $animate .then() method - using 'this'

I have a controller (below). I am wanting to update parts of newsCtrl from within the $animate's .then() method. But I am unable to access its variables. As you can see from the code, my issue is when currentPage is "undefined" So I am wondering,…
AnthW
  • 523
  • 5
  • 19
1
vote
1 answer

AngularJS: How to conditionally apply view animations?

My question could be a little strength since I haven't found any other case like that. I want to perform views animations, but not always. So far, I had the animation in the .css format: .view.ng-enter{ animation: view_enter…
Alex JM
  • 1,084
  • 2
  • 11
  • 32
1
vote
0 answers

AngularJS animation in directive not running on page load

I have a directive that triggers an animation that moves a div 200px higher when moving away from the the / location. This works well as long as the / location is our starting point, but when starting from another route, the addClass is still…
JensVN
  • 63
  • 1
  • 6
1
vote
1 answer

Can somebody explain the AngularJs animation nomenclature?

I always struggle setting up AngularJS animations, either because I don't yet "get it"TM or because the nomenclature is reversed. I'm sure it's the former. For example, the following CSS works, ie. the element flies in from the left on being shown,…
pinoyyid
  • 21,499
  • 14
  • 64
  • 115
1
vote
2 answers

AngularJS animation makes hidden element appear when the page is loaded

I have a hidden component in a directive and yet when the page is loaded, the hidden element appears for the duration of the animation, which should only be triggered when the component's model is set to visible. In this example I set the component…
modi
  • 13
  • 3
1
vote
0 answers

Animate view when model changes

I am using AngularJS v1.2.16, got simple animations like fadeIn working with ng-show using the class conventions, but also want to fadeIn (or blink) a given div when a given object of the model changes (info of this object is display inside that…
Christophe Roussy
  • 16,299
  • 4
  • 85
  • 85
1
vote
1 answer

AngularJS slider with ng-repeat and ng-move

I am trying to do a slider with multiple images and the code works for going right, but going left the ng-move class is applied to all the elements in the array which is not desirable. My Controller: $scope.slides = [ {image:…
Stephan Grobler
  • 469
  • 1
  • 5
  • 17
1
vote
1 answer

Nested ng-repeat animation

I have been trying to animate a list of elements divided by rows(the parent ng-repeat) and the columns(the child ng-repeat). I have achieved the animation that I wanted with singly ng-repeats. The problem is that when using the same animation with…
ryeballar
  • 29,658
  • 10
  • 65
  • 74
1
vote
1 answer

How do I run code after a ngView enter/leave javascript animation is done in AngularJS?

I'm trying to run a function after a page transition animation is done in AngularJS. Basically, what I'm trying to achieve is, to run specific code per view on certain times, like after enter transition & before leave transition. I'm using ngRoute…
Yves Van Broekhoven
  • 344
  • 1
  • 3
  • 13
1
vote
0 answers

Custome AngularJS route change page with end of animation callback

I created animation whitch is run during route change page. Such like Scotch described here http://scotch.io/tutorials/javascript/animating-angularjs-apps-ngview It's very good tut but i need to expand this solution by adding there callbacks on end…
imvanzen
  • 83
  • 2
  • 13
1 2 3
4
5 6 7 8