Angular Animations

Question

After taking a break from Angular, I've decided to jump back onto the bandwagon. I'm currently working on a relatively small project to help me get used to the framework in full, and I've found myself stuck.

I've read over and over that using jQuery with AngularJS is forbidden taboo, though I can't necessarily comprehend how to do the following purely in AngularJS,

controller.js

(function(){

    angular.module('app')
        .controller('homeCtrl', ['cache', 'page', '$scope', function(cache, page, $scope) {
            page.title.set('Home');
            if( !cache.getKey('welcomed') ) {
                $( "#welcome-message" ).fadeTo( 3000 , 0, function() {
                    $( "#welcome-message" ).hide();
                    $( "#after-welcome" ).show();
                    $( "#after-welcome" ).fadeTo( 2500 , 100 );
                    // cache.setKey('welcomed', true);
                });
            } else {
                $( "#welcome-message" ).hide();
                $( "#after-welcome" ).show();
                $( "#after-welcome" ).fadeTo( 2500 , 100 );
            }
        }]);

})();

As can be seen, I simply want to fade out of a welcome message and into the main content. I know of ngAnimate, though I'm still a novice. My question standing is -- is there any simple way to accomplish what I've done above without the use of jQuery?

Answer 1

Using jQuery in AngularJS is not a forbidden taboo. Using jQuery to manipulate DOM in controllers is. You can use jQuery in directives or in animations. For example ( demo ):

myModule.animation('.show-hide-animation', function() {
  return {
    beforeAddClass : function(element, className, done) {
      if(className == 'ng-hide') {
        element.fadeTo(2500, 0, function() {
          done();
        });
        return function() {
          element.css('opacity', null);
        }
      } else {
        done();
      }
    },

    removeClass : function(element, className, done) {
      if(className == 'ng-hide') {
          element.fadeTo( 3000 , 0, function() {
            element.fadeTo( 2500 , 1, function() {
              done();
            });
          });      
        return function() {
          element.css('opacity', null);
        }
      } else {
        done();
      }
    }
  }
});

You can read more on javascript / jquery animations in:

• Angular official docs .
• angular ng-newsletter (I've used their demo as basis).