Stack Overflow
Stack Overflow

Questions tagged [ng-animate]

The ngAnimate module provides support for CSS-based animations (keyframes and transitions) as well as JavaScript-based animations via callback hooks. Animations are not enabled by default, however, by including ngAnimate then the animation hooks are enabled for an AngularJS app.

Usage

Simply put, there are two ways to make use of animations when ngAnimate is used: by using CSS and JavaScript. The former works purely based using CSS (by using matching CSS selectors/styles) and the latter triggers animations that are registered via module.animation(). For both CSS and JS animations the sole requirement is to have a matching CSS class that exists both in the registered animation and within the HTML element that the animation will be triggered on.

Reference - AngularJS ngAnimate docs.

Tutorial - How to use AngularJS with NgAnimate

Github - https://github.com/angular/angular.js/tree/master/src/ngAnimate

NPM package - https://www.npmjs.com/package/ng-animate

From Wikipedia

ng-animate

A module provides support for JavaScript, CSS3 transition and CSS3 keyframe animation hooks within existing core and custom directives.

Since ng-* attributes are not valid in HTML specifications, data-ng-* can also be used as a prefix. For example, both ng-app and data-ng-app are valid in AngularJS.

648 questions
9
votes
2 answers

Dynamically create Angular animations

I am creating a paging component that slides to next or previous fullscreen page. Because issues with different browsers and devices I have abandoned just using CSS transitions for now. I have a working angular animate solution but the new problem…
Hampus
  • 2,769
  • 1
  • 22
  • 38
9
votes
1 answer

ngAnimate - Sliding both ways

I'm struggling with an issue: I have a menu with x-amount of items. In this example, I have three items. Each item has a content section, so by clicking on the menu item, the content should slide in. What I have achieved so far, is that when you're…
Jorrex
  • 1,503
  • 3
  • 13
  • 32
9
votes
0 answers

Angular 2 Animate - No visible effect of the '* => void' transition when changing routes/components

Using the Angular 2 Animate (RC2), with the help of official Docs, and the code used by Matias in the month old ng-conf animate video on YT channel. I got everything working except the most crucial part: I cannot seem to get the leaving…
vSimak
  • 377
  • 3
  • 6
9
votes
1 answer

How do you animate table rows using ng-animate in the same way as one would list items?

It's quite simple to smoothly animate lists using angular's ng-animate, but tables seem to be another story. Plunker list Plunker table The table move animations don't work, the items just snap into place, I suppose some other CSS/JS is required for…
Kesarion
  • 2,808
  • 5
  • 31
  • 52
9
votes
1 answer

Angularjs - animating children of repeated elements

Friends, I'm banging my head about this issue, I was hoping you can help me. I'm trying to animate the child of a repeated element with angularjs 1.2rc1 (perhaps this has changed?), more or less like this:
9
votes
2 answers

during ng-animate of views, "leaving" view still takes up space while "entering" view is animating in

I'm using AngularJS 1.1.5 and trying out the ng-animate directive with daneden's animate.css. I have a couple of views set up using routing. I'm using Twitter Bootstrap 3 RC1. Here is the code for the ng-view:
OJ Raqueño
  • 4,471
  • 2
  • 17
  • 30
9
votes
2 answers

ng-view along with ng-animate executes directive twice

while i was playing with ng-view and ng-animate from angularjs 1.1.4, i noticed that directives are executed twice. once for the element in the view that enters the screen and again for the element in the view which leaves the screen (while the…
Michael Alexander Freund
  • 266
  • 3
  • 8
8
votes
1 answer

Best practice for animating multiple ui-views as one

I have an app that basically looks like this
Now, the footer will stay the same for all different states of the app, but the header will change in some states, but also share…
INT
  • 910
  • 4
  • 21
  • 45
8
votes
3 answers

Slide left/right with angular ui-router on state change + back button (for mobile usage)

I use Angular ui-router and ng-animate for a hybrid mobile app. So I would like to use mobile standard transitions between screens (or states). Going deeper into the application, slide-left. Going back up (with the back button): slide-right. Nothing…
DHFW
  • 173
  • 1
  • 10
8
votes
2 answers

Animate.css and Angularjs ng-hide

I am learning and experimenting with Angularjs and animate.css. I am trying to add animations when the ng-show is true or false. The showing and hiding works but not the animations. Hope someone here can show me what I am doing wrong. Here is the…
Miguel-.o
  • 178
  • 1
  • 4
  • 12
8
votes
1 answer

Unable to find a suitable version for angular with bower installation error for angular-animate module

I am using Angular 1.2.6. I am trying to use bower to install angular-animate and ngAnimate-animate.css. I've tried installing (bower install --save angular-animate), uninstalling several time and diff code on github from 1.2.16 and 1.2.17. Bower…
Danger14
  • 760
  • 2
  • 12
  • 33
8
votes
7 answers

Angular js - slide views but not home page - ng-animate

i'm using ng-animate to slide the app views, so each route slides own view , this is my simple code: html:
css: /*Animations*/ .slide{ left:0; } .slide.ng-enter{ transition:0.15s linear all; …
itsme
  • 48,972
  • 96
  • 224
  • 345
7
votes
1 answer

ngAnimate stopped working in AngularJS 1.6.4

I've got a simple application with a simple css animation which works like a charm in AngularJS 1.2.2 + ngAnimate 1.2.2: -> Runnable demo works like a charm. For (maybe) no reason the same codes doesn't work with AngularJS 1.6.4 + ngAnimate…
lin
  • 17,956
  • 4
  • 59
  • 83
7
votes
2 answers

Why doesn't my directive's enter animation using ng-if run on first time when using AngularJS 1.5?

http://codepen.io/anon/pen/MygQvb I was using Angular 1.4.7 and then decided to upgrade. After that, all animations on directives using ng-if stopped working on the first time they were supposed to happen. The example above on Codepen shows what I…
GelsonMR
  • 221
  • 2
  • 11
7
votes
2 answers

Angular ui-view animation not working when using named views

I have an animation attached to an unnamed ui-view. This works correctly when the router look slike this: Working example: $stateProvider .state('home', { url: '/', templateUrl: 'app/main/main.html', controller: 'MainCtrl as main', …
Ole Henrik Skogstrøm
  • 6,353
  • 10
  • 57
  • 89
1 2
3
…
43 44