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 directive to show list of items - want to animate the removal of an item via a button click on that row

I have a directive that gets a list of items from the server. (function () { 'use strict'; angular.module('app').directive('myActionItems', ['ActionService', function (ActionService) { return { restrict: 'E', scope: { …
Jon
  • 15,110
  • 28
  • 92
  • 132
0
votes
1 answer

Animate (easeOutCirc) a DOM Element using AngularJS

How can I write this piece of the code in AnguarJs ? Particularly the animation part (easeOutCirc) used in this example: $(document).ready(function () { function addCircle() { var $circle = $('
'); …
Ouad
  • 33
  • 1
  • 5
0
votes
1 answer

$animate.cancel does not have the expected behavior

I m trying to use the cancel feature of angularJS's $animate : https://docs.angularjs.org/api/ngAnimate/service/$animate with the latest stable version: 1.3.2 But either I have failed to understand what it is supposed to do or it does not have the…
Tristan
  • 3,192
  • 3
  • 20
  • 32
0
votes
2 answers

AngularJS animations with ng-class when swapping between two classes

Using AngularJS and ng-class, I'm trying to animate when classes change between three possible states. I have a div that can be in three states, represented by classes on the div. The states are defined as follows:
wizeowl
  • 466
  • 1
  • 6
  • 13
0
votes
1 answer

Animating ng-show on a table row

I'm trying to slide up/down a table row when toggling ng-show. I'm using AngularJS v1.3.0-rc.5 and have included ngAnimation module in my app but it always toggles, doesn't animate. Am I doing something wrong? The HTML code is the…
Gaui
  • 8,723
  • 16
  • 64
  • 91
0
votes
0 answers

Delaying child animations in a view

I'm new to AngularJS but before asking this question i've searched and searched for an answer on how to do this the Angular Way but have come up short. What i'm looking to do: Have child animations of a view trigger [delay] until after the…
Shane
  • 564
  • 2
  • 9
0
votes
0 answers

why does angular animation within directive execute on page load?

I have an angular ngSwitch animation applied in 2 different ways, one within a directive, and one on the html page. The animation within the directive fires on page load. Why is this occurring and how to fix? plunker:…
Andrew
  • 5,525
  • 5
  • 36
  • 40
0
votes
1 answer

How to stop angular 1.2 ngclass animation from running on re-compile

Example: http://codepen.io/anon/pen/ixEdu In the example provided above I have an angular animation using ngClass. When the element containing the animation is re-compiled the animation is run. How do I stop this from occuring? HTML:
Andrew
  • 5,525
  • 5
  • 36
  • 40
0
votes
0 answers

Late created animations angular

I have some code that creates and registers some animations inside a controller. Unfortunately, whenever I register an animation inside a controller, it does not seem to initialise (The function never gets called.) I have created a plunker to…
major-mann
  • 2,602
  • 22
  • 37
0
votes
1 answer

Can't get AngularJS animations to work on change of view

I have read the AngularJS docs, done several tutorials including the scotch and moo ones. I can get their sample code to run. However, I don't seem to understand what is the trigger for Angular to apply the CSS styles to create the animations. I…
Guido Anselmi
  • 3,872
  • 8
  • 35
  • 58
0
votes
1 answer

Anuglar-animate. 1.2.9 uncaught object

I've an running an web application with angular.js (1.2.9) i want to extend it with some animation stuff. For this i i referenced the ng-animate js-file:
Boas Enkler
  • 12,264
  • 16
  • 69
  • 143
0
votes
1 answer

CSS 3 float text top left in keyframe animation

I've tried many different ways to add text to this keyframe animation, but the problem is that it messes up one of the animations when I include the div containing the text. Ideally, I want the text to be center and top or center and top left, but…
chrislhardin
  • 1,747
  • 1
  • 28
  • 44
0
votes
1 answer

angularjs exclude certain elements from animations

I'm using ngAnimate in some places but it's taking over animations for all my ng-class elements. I already had substantial animations code written for various elements that I don't need ngAnimate to take over. Their adding classes really seems to…
Harry
  • 52,711
  • 71
  • 177
  • 261
0
votes
1 answer

AngularJS animate dynamic margin

I have an element that appears when the user clicks a button elsewhere on the screen. The element appears to come out of the top of the screen. The element by default needs to be tucked out of view above the screen, so I will have a margin-top…
Ryan Langton
  • 6,294
  • 15
  • 53
  • 103
0
votes
0 answers

Angular JS Animation not calling beforeAddClass

I am trying to create an animation using AngJS 1.2.15 I have defined a directive who's purpose is to create a post element and pass showAnswer boolean to the element. And created a animation module which it animates on if a answer class is…
Vishal Sakaria
  • 1,367
  • 1
  • 17
  • 28
1 2 3 4 5 6
7
8