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

Different animation when history.back() ist used

I've created a website based on AngularJS. Every page has it's own template and controller and is included via ng-view in the main layout. But I have a problem with animations between different pages. I want them to fly in from the right (and to…
Christopher
  • 2,005
  • 3
  • 24
  • 50
2
votes
1 answer

ngAnimate throwing an error at line 992

I'm currently trying to figure out who broke my script, me or angular-animate.js. I'm pretty sure it's me, but hey, miracles could happen and I can be innocent this time. This is my HTML code: …
Shubbi
  • 107
  • 1
  • 2
  • 6
2
votes
2 answers

$animate callback promise not work in angularjs

Reference to $animate api, $animation supported callback promise since angular1.3. But my code not worked angular.module('app', [ngAnimate]) .factory('test', ['$animate', '$q', function($animate, $q) { return { test: function(element) { …
worldask
  • 1,837
  • 3
  • 22
  • 37
2
votes
2 answers

AngularJS 1.2 ng-repeat animation on page load

Staggering Animations are great! But I don't get it to work without user interaction. There is a total normal ng-repeat list:
{{category}} …
paul
  • 488
  • 5
  • 16
2
votes
1 answer

Custom Angularjs directive vs. ng-class

Several times when creating or customizing a directive (either my own directive or for example https://github.com/dpiccone/ng-pageslide) I get a point where all the display logic is controlled by a single css class. At that point the directive…
hypercubed
  • 51
  • 3
2
votes
1 answer

Wait Until All Animations Complete Before Removing From DOM with Angular Animation

I'm using the staggered feature for Angular animations (https://docs.angularjs.org/api/ngAnimate#css-staggering-animations). Is there a way that I can use this and also have the items not be removed from the DOM until all of the animations are…
Andrew Burgess
  • 5,300
  • 5
  • 30
  • 37
2
votes
1 answer

Can't get Angular 'staggering' animations working

First time trying to use angular animations and can't work out what I'm doing wrong. I'm using AngularJS v1.3.0-build.2805 for both Angular itself and Animation module. -1. Module is included angular.module('profileApp', [ …
markstewie
  • 9,237
  • 10
  • 50
  • 72
2
votes
2 answers

How to initialize an Angularjs css3 animation using Javascript

I am currently trying to do a CSS3 animation in Angular.js. Before animating I try to set the initial css properties using Javascript. So, is there a way to initialize an animation using Javascript and then continue the animation using CSS3? My…
Hendrik Jan
  • 4,396
  • 8
  • 39
  • 75
2
votes
1 answer

Animating view navigation forwards and backwards

So, Angular 1.2 has full ng-animate support, and I've been using it for page transitions - initial setup was easy enough, awesome. Forward animations (left-to-right), no problem. Backwards navigation? Issues. In theory it just works: see…
cthulhu
  • 3,142
  • 2
  • 23
  • 32
2
votes
1 answer

Use effekt with angularjs

How use effekt animation with angularjs http://h5bp.github.io/Effeckt.css/dist/? Anyone can create a exemple to use this with angularjs?
timactive
  • 789
  • 6
  • 27
2
votes
3 answers

ngAnimate with ui-view

I am having major problems with getting ngAnimate to work with ui-view. The classes never get applied. Please help: bower.json "angular": "1.2.0-rc.2", "angular-resource": "1.2.0-rc.2", "angular-ui-router": "0.2.5", "angular-ui-utils":…
Michael Tempest
  • 814
  • 7
  • 12
2
votes
2 answers

Error when injecting angular-animate.js

I am receiving the following error when injecting angular-animate.js: Unknown provider: $animateProvider from ngAnimate Here is my app.js: var MyApp = angular.module("MyApp", ["ui.bootstrap", "ngAnimate"]) Here is head of index.html:
Bojana Šekeljić
  • 1,056
  • 1
  • 12
  • 30
2
votes
1 answer

Different transitions with AngularJS

How can I enable different transitions with AngularJS. Lets Say, I have a sidebar in my web application. I the user clicks a button X, the sidebar should disappear very fast, if the user clicks another button, the sidebar should disappear slow. I…
stofl
  • 2,950
  • 6
  • 35
  • 48
2
votes
1 answer

Prevent angularjs animation from running on element that is initially hidden when loaded

http://codepen.io/cflynn07/pen/hbgxf ^ Example I have an angularjs animation, and I don't want it to run on page load for an element that is supposed to be hidden. Right now, the element is shown, then the slide up animation occurs and hides the…
Casey Flynn
  • 13,654
  • 23
  • 103
  • 194
1
vote
1 answer

Can't use CSS ID selector for angular animate transition

My checkbox input toggles my myDiv using ng-show. I would like this to look fancy. Thus, I'm using a transition effect, using angular-animate.js.
phil294
  • 10,038
  • 8
  • 65
  • 98
1 2
3
4 5 6 7 8