title: Two different animations for route changes
body: <p>I have the following case: I'm using the ui-router for the routing in my AngularJS application. In one route, there are five child states for different subscreens. I want to animate the transition between these in a carousel-like manner.</p>
  
  <p>The navigation looks like this:</p>
  
  <pre><code>Link to A | Link to B | Link to C | Link to D | Link to E
  </code></pre>
  
  <p>Navigating from <code>state A</code> to <code>state B</code> should make <code>screen A</code> slide out to the left and <code>screen B</code> slide in from the right; vice versa for navigating from <code>state B</code> to <code>state A</code>.</p>
  
  <p>What does work is animating the screen transitions with <code>transform: translateX(...);</code> on <code>enter</code> and <code>leave</code> in <em>one</em> direction only.</p>
  
  <p>Usually, I control my animations using <code>ng-class</code> with a flag. In this case, however, setting a class on the <code>ui-view</code> element doesn't work at all (Angular 1.2 and ui-router 0.2 aren't completely compatible yet). Neither is it working with setting it with a custom directive listening to <code>scope.$on "$stateChangeStart"</code> which is fired after the transition has begun.</p>
  
  <p>How can I implement the desired behavior?</p>
  
  <p><strong>Edit: The solution</strong></p>
  
  <p>For the record: I ended up implementing it using a custom <code>$scope</code> function using <code>$state.go()</code> to determine the direction before changing the route. This avoids the <code>$digest already in progress</code> errors. The class determining the animation is added to the <code>ui-view</code>'s parent element; this animates both the current as well as the future <code>ui-view</code> in the correct direction.</p>
  
  <p>Controller function (Coffeescript):</p>
  
  <pre><code>go: (entry) -&gt;
    fromIdx = ...
    toIdx = ...
  
    if fromIdx &gt; toIdx
      $scope.back = false
    else
      $scope.back = true
  
    $state.go entry
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>&lt;div ng-class="{toLeft: back}"&gt;
    &lt;div ui-view&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>