title: AngularJS - animation callback / sequence
body: <p>I'm just finding my way with Angular, and more importantly trying to find my way without jQuery!</p>
  
  <p>I'd like to have a view that shows a loading spinner while data is fetched from the server, and when it arrives (the model will have a property of "Populated") I want the spinner to fade out, and the content to fade in.</p>
  
  <p>I'm using a directive for the loading bit, and ng-show seems simple enough to switch the sections in the view.</p>
  
  <p>View:</p>
  
  <pre><code>&lt;div ng-hide="model.Populated" loading-spinner&gt;&lt;/div&gt;
  &lt;div ng-show="model.Populated"&gt;&lt;!-- Content goes here --&gt; &lt;/div&gt;
  </code></pre>
  
  <p>Directive:</p>
  
  <pre><code>module App.Directives {
  declare var Spinner: any;
  export class LoadingSpinner {
      constructor() {
          var directive: ng.IDirective = {};
          directive.restrict = 'A';
          directive.scope = { loading: '=myLoadingSpinner'},
          directive.template = '&lt;div class="loading-spinner-container"&gt;&lt;/div&gt;';
          directive.link = function (scope, element, attrs) {
              var spinner = new Spinner().spin();
              var loadingContainer = element.find('.loading-spinner-container')[0];
              loadingContainer.appendChild(spinner.el);
          };
          return directive;
      }
  }
  </code></pre>
  
  <p>It's the animation I'm not sure about. In particular, I want the content to fade in once the spinner has completely faded out, and I'm not sure how to do this with a callback.</p>
  
  <p>Should I attempt all the animation with CSS or expand on my directive and use javascript?</p>
  
  <p>(I'm using TypeScript for anyone wondering about the syntax)</p>