title: Conditionally animating ng-view transitions
body: <p>I am trying to apply animations to ng-view (routing) depending of the views involved.</p>
  
  <p>For example, from View1 to View2 I need the View1 leaving through the left side and View1 entering from the right side. Otherwise, from View2 to View1 I need View2 leaving through the right side and View1 entering from the left side.</p>
  
  <p>But I have also situations where I need apply different animations to both views, for example, View1 leaving fading out and View2 entering scaling up.</p>
  
  <p>What I am doing is using a scope associated variable as class in the ng-view: </p>
  
  <pre><code>&lt;div ng-view class="{{transition}}"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This variable is set in each route change with something like this in each controller:</p>
  
  <pre><code>$scope.transition=Global.transition;
  
  $rootScope.$on("$routeChangeStart",function (event, current, previous) {
     // Here I get the leaving view and the entering view and the kind of transition is selected
     ...
     $scope.transition=selectedLeavingTransition;  // Set the transition for the leaving view
     Global.transition=selectedEnteringTransition; // Set the transition for the entering view
  });
  </code></pre>
  
  <p>Global is a service to set the transition variable for the entering scope from the leaving scope.</p>
  
  <p>This way, when a route change is detected, the current ng-view is set with the class associated to selectedLeavingTransition, and the entering ng-view is set with the class associated to selectedEnteringTransition.</p>
  
  <p>For example, if the route change was from View1 to View2 the ng-views during the animation could be:</p>
  
  <pre><code>&lt;div ng-view class="fadeOut ng-animate ng-leave ng-leave-active"&gt;&lt;/div&gt;
  &lt;div ng-view class="scaleUp ng-animate ng-enter ng-enter-active"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The CSS in this case could be:</p>
  
  <pre><code>fadeOut.ng-leave {animation:1s fadeOut;}
  scaleUp.ng-enter {animation:1s scaleUp;}
  </code></pre>
  
  <p>Though it works, I am wondering if there is a simpler way to do it as it seems a little mess.</p>