Animating Angular Wizard

I have added a nice fade animation to each step of the wizard I created in my previous blog post.

Watch the video below or try out the live demo:

It turned out to be very simple indeed:

1) Add a script reference to the Angular-Animate.js library in your html page

2) Create an Animate.css file which will contain your animation details and add a reference within your html page.  I’ll explain the content of this code in a second.

3) Add a css class to the area you are animating, this is so your css code can locate it.  I added “fade-animation” class to each of the three wizard steps.

4) Finally add a reference to ngAnimate for Angular

And that’s it.  Right, now for the trickiest part, here is the animate.css code:

.fade-animation.ng-hide-remove {
  -webkit-transition:all linear 0.5s;
  -moz-transition:all linear 0.5s;
  -o-transition:all linear 0.5s;
  transition:all linear 0.5s;
  display:block!important;
}

.fade-animation.ng-hide-add.ng-hide-add-active,
.fade-animation.ng-hide-remove {
  opacity:0;
}

.fade-animation.ng-hide-add,
.fade-animation.ng-hide-remove.ng-hide-remove-active {
  opacity:1;
}

When you break this down there’s not much to it.  The first section is saying I want the animation to take half a second, in all the various browsers.  The display:block!important line is telling angular to override it’s default for hiding.

The other two css setters simply show and hide.  Now the interesting bit is the css selectors.  You’ll recognise the fade-animation selector as our class we are using for identification purposes. 

All the ng-hide-* css classes are what Angular adds as it cycles through its event lifecycle for showing and hiding.

This would be the lifecycle for moving for the user moving from Step One to Step Two:

• Step One section is hidden:  ng-hide-add (start) then ng-hide-add-active (complete)
  
• Step Two is no longer hidden:  ng-hide-remove then ng-hide-remove-active

Angular dynamically adds and removes these classes to the sections as it cycles through the events.  There’s lots more to animations but this makes for a nice simple introductory example.

Source code