augus / nganimate

ngAnimate is best effect sulotion made for AngularJS

##Change Log##

• 2013/10/18 : Support ng-show, ng-hide feature.
• 2013/10/17 : Fix the problems in angularjs 1.2.0-rc.3.

##About ngAnimate## ngAnimate is the best effect solution made for AngularJS.

ngAnimate only supports angularjs 1.2 - because it based on the AngularJS 1.2 extras ngAnimate.js module.

##Animations classes##

• toggle
• spin-toggle
• slide-left
• slide-right
• slide-top
• slide-down
• bouncy-slide-left
• bouncy-slide-right
• bouncy-slide-top
• bouncy-slide-down
• scale-fade
• scale-fade-in
• bouncy-scale-in
• flip-in
• rotate-in
• more if you have :)

##How to use?##

1. Add ngAnimate.js first. (from angularjs1.2 extras)
2. Add ng-animate.css to you website.
3. Add animate class in html elements which you want have some effect.
4. Done!

DEMO

http://augus.github.io/ngAnimate/

nganimate's Issues

Add compressed version of ng-animate.css

Support ngRepeat

Add .ng-move and .ng-move-active.

Add bower installation for ng-animate

any solution to use it with angular 1.5.0?

Is there any solution or polyfill to use ngAnimate with angular 1.5.0 ?

PlayAll allows multiple click, which can result animations running multiple times

Add new effect like ThumbnailGridAnimations

Add new effect like grid animations.
http://tympanus.net/Development/ThumbnailGridAnimations/index.html

Not maintained anymore? Broken for Angular versions above v1.2.0-rc.3

None of the animations work beyond version v1.2.0-rc.3. It's very unfortunate. I'm using v1.3 for one-time binding syntax {{ ::main.user.name }}.

I was wondering why none of the animations worked even when I reverted to the current stable version of 1.2.

I cloned the repo and tried it with this with CDN versions of 1.2 and 1.3 with no resolution. :(

UI Bug on Mobile Device

Hey,

you may want to optimize the general CSS also for mobile.

ng-hide animation broken in firefox

I am using animate.css. I have following styles for animating a div with ng-hide.

.slide-down.ng-hide-remove {
    -webkit-animation: fadeInDown 0.5s;
    -moz-animation: fadeInDown 0.5s;
    -o-animation: fadeInDown 0.5s;
    animation: fadeInDown 0.5s;
}

.slide-down.ng-hide-add {
    -webkit-animation: fadeOutUp 0.5s;
    -moz-animation: fadeOutUp 0.5s;
    -o-animation: fadeOutUp 0.5s;
    animation: fadeOutUp 0.5s;
}

Unlike in chrome, .slide-down.ng-hide-add does not work in firefox while .slide-down.ng-hide-remove works fine.

_You can see it here._

Is there anything I am missing to make it work?

Update

I am using angularjs 1.3.9 and firefox 35.

Let demo page hosting by GitHub

GitHub Pages is a good idea to publish your demo page.

Here is manual.

Just create a new branch named gh-pages, than you can access http://augus.github.io/ngAnimate to see your demo page.

Demo page on Dropbox is OK, but if someday remove files, need clone this project to try, recommend you use GitHub Pages.

Writing tutorial documents.

ng-hide animation broken in firefox

I am using animate.css. I have following styles for animating a div with ng-hide.

.slide-down.ng-hide-remove {
    -webkit-animation: fadeInDown 0.5s;
    -moz-animation: fadeInDown 0.5s;
    -o-animation: fadeInDown 0.5s;
    animation: fadeInDown 0.5s;
}

.slide-down.ng-hide-add {
    -webkit-animation: fadeOutUp 0.5s;
    -moz-animation: fadeOutUp 0.5s;
    -o-animation: fadeOutUp 0.5s;
    animation: fadeOutUp 0.5s;
}

Unlike in chrome, .slide-down.ng-hide-add does not work in firefox while .slide-down.ng-hide-remove works fine.

Is there anything I am missing to make it work?

Examples

How to make it happen? It only says in the docs, to add two classes. But where?

Typo in the readme/project description

ngAnimate is best effect sulotion made for...

I am pretty sure it was meant to be solution.

As a side note you might want to also add a the such as:

ngAnimate is the best solution made for...

Support Angular1.2.13 $animate

Please support the breaking changes on $animate introduced in v1.2.13, see:
https://github.com/angular/angular.js/blob/master/CHANGELOG.md#1213-romantic-transclusion-2014-02-14

ng-show/ng-hide requires ng-hide-add ng-hide-remove styles

http://docs.angularjs.org/api/ng.directive:ngShow

As of now this css doesn't work with the ng-show directive. I think it does not even accept the same name for ng-show, i.e. adding a style like .fade-in.ng-hide-add does not work. So I guess new root style names have to be added - like .fade-in-show for .fade-in?

HELP! it doesn't work in angular version:1.3.20 ~~~~T_T