title: How to wait for animation end in ui-router $stateChangeStart?
body: <p>I use AngularJs in my project and ui-router within it.</p>
  
  <p>I need gently fade out current view before navigate user to another one when he clicks on the link.</p>
  
  <p>I've written directive for that and here is the link function for it:</p>
  
  <pre><code>link: function($scope, element) {
  
              $rootScope.$on('$stateChangeStart',
                  function (event, toState, toParams, fromState, fromParams) {
  
                  var $element = $('#fw');
  
                  $element.animate({
                      opacity: 0
                  }, 4000, function () {
  
                  });
  
          }
  </code></pre>
  
  <p>But of course transition executes immediately and doesn't wait for animation ends.</p>
  
  <p>I neither found solution to make jQuery animation sync nor suspend ui-router transition and then continue it in the animation callback.</p>
  
  <p>Please advise.</p>