ng-Animate not working for a Hide and Show setting ng-Animate not working for a Hide and Show setting angularjs angularjs

ng-Animate not working for a Hide and Show setting


The ng-animate attribute is deprecated in 1.2 and no longer used. Instead, animations are now class based.

Also make sure you are referencing angular-animate.js and adding ngAnimate as a dependent module:

var app = angular.module('myApp', ['ngAnimate']);

You then name your animations, for example 'fadein' and 'fadeout', and decorate them with some additional classes following a special naming convention that can be found in the Angular documentation.

Another good source on the topic is Year of moo.

Fadein example:

/* After the transition this will be the only class remaining */.fadein {  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;  opacity: 1; /* Default value but added for clarity */}/* Initial state when showing */.fadein.ng-hide-remove {  opacity: 0;  display: block !important;}/* Will transition towards this state */.fadein.ng-hide-remove.ng-hide-remove-active {  opacity: 1;}

Demo: http://plnkr.co/edit/V9w2EwUh0unszf62TZZB?p=preview