Will & Skill Developers

Will & Skill Developers

Thoughts, snippets and ideas from the team at Will & Skill AB, Stockholm.

Erik Svedin


Animating ui-router using CSS3 transitions

Erik SvedinErik Svedin

During the last week I’ve spent a few days over at Redeyes office, building the front end for Redeyes new premium concept launching this friday. Since we were in charge of the front end its now a complete SPA built with Angular.js.

One of the challenges was to do some fancy animations when toggling between different states in the app. Using ui-router for routing, in combination with angular-animate this proved to be really simple!

Assuming you’re already using ui.router all you have to do is import angular-animate and include ‘ngAnimate’ to your apps dependencies. Angular-animate will now hook in to you ui-view container adding classes when you change state. So how to animate this?

Angular animate uses five different classes:
‘ng-animate’, ‘ng-enter’, ‘ng-enter-active’, ‘ng-leave’ and ‘ng-leave-active’.

So what are they though? ‘ng-enter’ is added to the ui-view element when it’s first injected to the DOM, the class ‘ng-enter-active’ is added just after. This enables us to write CSS transitions from ‘ng-enter’, to the end state ‘ng-enter-active’. The ‘ng-animate’ class is present during the whole animation, enabling us to add general settings to our animated element, such as special positioning enabling css transforms.

If you’re familiar with css animations: I like to think of this concept similar to a simple keyframe, for example:

@keyframes animation {
  0%   { opacity: 0; }
  100% { opacity: 1; }

Where ‘ng-enter’ would be the 0%, and ‘ng-enter-active’ is 100%. The same concept applies to ng-leave.

If you’d like to fiddle around with this I’ve created a Codepen displaying everything I’ve tried to explain.

ps. it also includes the angular-material js/css. So check it out!

Erik Svedin

Erik Svedin