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

AngularJS animation on click

I'm trying to add a directive that animates the element when it is clicked, but the code in my directive never seems to trigger. Fiddle html: js: myApp.directive('animateSpin',…
Tantelope
  • 597
  • 1
  • 8
  • 24
0
votes
0 answers

Simple angualrjs animate of heights

I've searched for weeks on how to do this and I get how you can animate elements as they "enter" and "leave" the DOM using angular animate and generated css classes (ie. in ngRepeat). What I'm failing to understand is how to do simple event-based…
RavenHursT
  • 2,336
  • 1
  • 25
  • 46
0
votes
1 answer

AngularJS animation timing issue

I 'm building an application with a number of slides, and I'm using Angular JS to toggle classes on the elements that trigger CSS animations. The problem that I'm having is that when a button is clicked that triggers a function on the angular…
user3163245
  • 13
  • 3
0
votes
2 answers

Animating child element of ngRepeat on the 'enter' event. How can I avoid the animation for data initialization?

// please refer to the jsfiddle link below for the complete code. Here is the jsfiddle. Basically, the animation works just the way I want, but I don't want the it to occur for data initialization. What do I do? I prefer to see a proper way of…
tamakisquare
  • 16,659
  • 26
  • 88
  • 129
0
votes
1 answer

AngularJS animate navigation

I have a HTML mockup like this
How can I access in my controler in the…
Johnny000
  • 2,058
  • 5
  • 30
  • 59
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
0 answers

Paginated slides in Angular

I have an array of items which I want to filter on different kinds of filters. Because I have more than 2000 items I want to paginate between pages so I've created a startFrom directive and used angulars limitTo directive. This is all working fine…
timrijkse
  • 31
  • 4
0
votes
1 answer

ngAnimate on ngShow in ngRouted templateURL. Preventing animation when it starts first time

I am using ng-show #animation. index.html: -
templateURL contains:-
Sangram Singh
  • 7,161
  • 15
  • 50
  • 79
-1
votes
1 answer

ng-repeat end & start sliding animation

I created this toggle menu template but i have problem implementing this sliding-animation. Can anyone help me?
Shift 'n Tab
  • 8,808
  • 12
  • 73
  • 117
1 2 3 4 5 6 7
8