title: Apply a state class to ui-view to allow different ng animation
body: <p>I need to apply different animations depending on the current state using <code>ui-view</code>.  Following on from <a href="https://stackoverflow.com/questions/21308563/add-a-class-to-the-ui-view-based-on-the-current-state">this question..</a></p>
  
  <p>I have the following code (edit: see <a href="http://plnkr.co/edit/3QjBzRu5VjOzK7czn71e?p=preview" rel="nofollow noreferrer">plunker preview</a>)</p>
  
  <pre><code>&lt;section ui-view ng-class="stateClass"&gt;&lt;/section&gt;
  </code></pre>
  
  <p><code>stateClass</code> gets applied in each controller e.g: </p>
  
  <pre><code>.controller('loginController', function($scope, $state) {
    // Set state class name
    $scope.stateClass = 'slide-left';
    console.log($scope);
  </code></pre>
  
  <p>This works and the class gets added fine - but the animation wont kick in. </p>
  
  <p>If I was to update the <code>ui-view</code> code to:</p>
  
  <pre><code>&lt;section ui-view class="slide-left"&gt;&lt;/section&gt;
  </code></pre>
  
  <p>with the class hardcoded, this works (but now I can't apply different animations). </p>
  
  <p>Does <code>ng-class</code> get added after <code>ng-enter</code>? Can someone suggest how to achieve the animations?</p>
  
  <p>edit>> Oddly enough <code>ng-leave</code> animations work fine.  But css still doesn't apply to <code>ng-enter</code> </p>