user3368623 user3368623 - 5 months ago 23
AngularJS Question

ng-Animate not working for a Hide and Show setting

I'm using AngularJS version 1.2.11. I've set a toolbar to slide in and out with a transition using ng-Animate (show and hide).

Here is the HTML:

<div>
<div class="full-height">
<menu-main class="full-height pull-left"></menu-main>
<menu-sub class="full-height pull-left" ng-show="data.active" ng-animate="'animate'">
</menu-sub>
</div>
</div>


And here is the CSS for the same toolbar element

.animate.fade-hide, .animate..fade-show {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
}
.animate.fade-hide, {
position: fixed;
top: 500px;
opacity: 0.3;
}
.animate.fade-hide, .animate.fade-hide-active
{
position: fixed;
top: 500px;
opacity: 0.3;
}
.animate.fade-show {
position: fixed;
top: 100px;
opacity: 1;
}
.animate.fade-show, .animate.fade-show-active {
position: fixed;
top: 100px;
opacity: 1;
}


The animation does not work, and I'm not sure if I'm doing this correctly.

Answer

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

Comments