Angular.JS delay route change for do animation

Question

I'm using Semantic UI as a front-end framework. In it, I've a Javascript function for create some transitions, more info Here.

I want use it for create route change animation in Angular.JS. I tried to do this:

app.run(['$location', '$rootScope', function($location, $rootScope) {
    $rootScope.$on('$routeChangeStart', function (event, next) {
        $("#main").transition('fade up', '300ms');
    });
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $("#main").transition('fade down', '300ms');
    });
}])

#main is DOM element where is my ng-view. But it doesn't works propertly, because route change become too fast. So, my question is, what can I delay route change? Or maybe is a better solution?

Answer 1

I think thinking about delaying the route change isn't a great idea, as you may hit into problems if there are route changes in quick succession.

However, Angular has built in support for animations, including javascript-powered transitions like (presumably) the ones from Semantic UI. There is a fair bit of information at

http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html#how-to-make-animations-in-angularjs

But what I think you'll need is to

• Add a class, like "my-animated-view", to the ng-view (/ui-view?) element
• Write code similar to the below (copied + modified from the above page), customising the "enter" transition to transition views coming in. If you want a transition on the views leaving, do it on the "leave". The others can be left as default (which just call the done() function to tell Angular the animation is done), as I don't think you need them in your case

What Angular will do is on entry of a view, it will call the "enter" transition, and clean up after you call the passed "done" function.

myApp.animation('.my-animated-view', function() {
  return {
    enter : function(element, done) {    
      //node the done method here as the 3rd param
      $(element).transition('fade up', '300ms', done);

      return function(cancelled) {
        /* this (optional) function is called when the animation is complete
           or when the animation has been cancelled (which is when
           another animation is started on the same element while the
           current animation is still in progress). */
        if(cancelled) {
          // Something here to stop?
        }
      }
    },

    leave : function(element, done) { done(); },
    move : function(element, done) { done(); },

    beforeAddClass : function(element, className, done) { done(); },
    addClass : function(element, className, done) { done(); },

    beforeRemoveClass : function(element, className, done) { done(); },
    removeClass : function(element, className, done) { done(); },

    allowCancel : function(element, event, className) {}
  };
});