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

Angular Animations with ng-repeat, always fire off ng-enter on array change

I have an array list I'm filtering with a text field and ng-repeat. The animations I'm using for ng-enter are very simple (a fade in), however when I press backspace on my search query ONLY the filter items load in and it looks buggy. Is there a way…
SD Dev
  • 335
  • 3
  • 10
0
votes
0 answers

Angular JS left Panel slider with animation for mobile app (Cordova)

Please help me to get left panel slider for mobile app using angular js. i want my mobile app to be light weight. Excluding cases not using any bootstrap,ui bootstrap,ionic,no native features
0
votes
1 answer

Angular Filter and NgAnimate conflict

I am using angular-filter and angular-animate together, because I need do a group by in ngRepeat, but when I try to run, I am getting a error: Uncaught Error: [$injector:modulerr]…
0
votes
0 answers

AngularJS synchronise 2 animations on one element

I want to update the data shown by a Directive using an animation: slide old information off downwards; while offscreen, change the data to be shown (I also presumably need to change the translateY from +100% to -100% at this stage) slide the new…
Simon H
  • 20,332
  • 14
  • 71
  • 128
0
votes
1 answer

ng-leave-active on absolute positioned list of divs

When I remove element from the list of absolute positioned divs, the ngAnimate animation for that actions is not performed as expected. Below is an example HTML
0
votes
1 answer

my ngAnimate doesn't work?

i want to use ngAnimate but somehow it doesn't work and i don't know why. i have added everything to my page and have injected them in my app but still i am getting nothing. here is my index and my app; var app = angular.module('iranfile',…
Amir Rezvani
  • 1,262
  • 11
  • 34
0
votes
0 answers

how to do shop items into basket Notification animation looks like the below images

I am stuck in the animation for my an ionic application looks like on the below image. I didn't find the similar type of animation after a lot of searching, So please can anyone help me into this? Please find the image: the animation in the image…
0
votes
1 answer

Adding slide in and out animations with angular animation (ng-show)

So I have two sets of 4 buttons. Only 1 set of buttons is made visible by ng-show expression at a time. I am having difficulty working with angular animation css to create a slide in on ng-show-add and a slide out on ng-show-remove. Heres my…
Daniel Kobe
  • 9,376
  • 15
  • 62
  • 109
0
votes
1 answer

.ng-enter not working in Angular 1.3.14?

I cannot seem to get ng-enter animations to work. I have a repeated div presenting so-called "feature boxes," which are small headline boxes. I have read through numerous tutorials and cannot figure out why my code is any different/is not working.…
0
votes
1 answer

Angular.js page transition & $animate.addClass

I would like to add a specific class to my wrapper when my route change so I can control what CSS animation will be triggered. I try to do it like that : http://plnkr.co/edit/KRwBFb6bCTkit9eKg8yb?p=preview $rootScope.$on( "$routeChangeSuccess",…
SylRob
  • 37
  • 1
  • 7
0
votes
0 answers

Issue with angular animation and undefined javascript values

I am trying to get an angular animation to be triggered upon an unsuccessful login (either when the server sends a 4xx (e.g. 403) or when no credentials are provided). Here is the controller: .controller('SigninCtrl', ['$scope', '$rootScope',…
balteo
  • 23,602
  • 63
  • 219
  • 412
0
votes
2 answers

angular animate function expected error in ie9

I am using angular-animate.js in angularjs ui grid plugin. But in ie9 I am getting error "Function expected" in function fireDoneCallbackAsync(). Please see the attached screenshot. How can I handle this error and also I am not clear from which…
Madasu K
  • 1,813
  • 2
  • 38
  • 72
0
votes
0 answers

Toggle 2 divs with animation

I have two
's that users toggle between them with a checkbox. if the checkbox is checked, the first
is open. if the checkbox is unchecked, the second
should be shown. The thing is this has to happen in animation, and specifically…
Moshe Shaham
  • 15,448
  • 22
  • 74
  • 114
0
votes
1 answer

Angular JS 1.3 - Animating Ng-Repeat and Ng-Show Elements

I have a list of ng-repeat items. Only one of the items are shown at any one time and the rest are hidden using ng-show.
Lloyd Banks
  • 35,740
  • 58
  • 156
  • 248
0
votes
1 answer

Angularjs animation not working and I hit a deadend

This is my code for you to have a look at if possible. Nothing official there, I just set this code aside to be used later.