title: Are conditional transitions possible with ngAnimate?
body: <p>I have setup an animation in my application on ngView using ngAnimate. Every time there is a state change, the next view slides in from the <strong>right</strong>. </p>
  
  <p>I would like to be able to reverse this, so that in some instances, the view slides in from the <strong>left</strong> (if the user is going <em>back</em>).</p>
  
  <p>Since the only classes offered are <code>.ng-enter</code>, <code>.ng-leave</code>, and <code>.*-active</code>, what are my options? Is this even possible?</p>
  
  <p><a href="https://codepen.io/drewwyatt/pen/jbMKZz" rel="nofollow">Here's a CodePen</a>, <strong>OR</strong> see my sample code here:</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div ng-app="app"&gt;
    &lt;div ng-controller="DemoController as vm"&gt;
      &lt;div ui-view class="foo"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>html,
  [ui-view] {
   background: yellow; 
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
  }
  
  div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
  }
  
  [ui-view].ng-enter,
  [ui-view].ng-leave {
    position: absolute;
    left: 0;
    right: 0;
      transition:all .5s ease-in-out;
  }
  
  [ui-view].ng-enter {
    opacity: 0;
    transform:translate3d(100%, 0, 0);
    /*transform:scale3d(0.5, 0.5, 0.5);*/
  }
  
  [ui-view].ng-enter-active {
    opacity: 1;
    transform:translate3d(0, 0, 0);
    /*transform:scale3d(1, 1, 1);*/
  }
  
  [ui-view].ng-leave {
    opacity: 1;
    transform:translate3d(0, 0, 0);
  }
  
  [ui-view].ng-leave-active {
    opacity: 0;
    transform:translate3d(-100%, 0, 0);
  }
  </code></pre>
  
  <p><strong>javascript</strong></p>
  
  <pre><code>'use strict';
  
  angular.module('app', ['ui.router', 'ngAnimate'])
  .config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/one');  
    $stateProvider
      .state('one', {
        url: '/one',
        template: '&lt;div class="one"&gt;&lt;h1&gt;ONE!&lt;/h1&gt;&lt;button ng-click="vm.two()"&gt;go to two&lt;/button&gt;&lt;/div&gt;'
      })
      .state('two', {
        url: '/two',
        template: '&lt;div class="two"&gt;&lt;h1&gt;TWO!&lt;/h1&gt;&lt;button ng-click="vm.one()"&gt;go to one&lt;/button&gt;&lt;/div&gt;'
      });;
  })
  .controller('DemoController', DemoController);
  
  DemoController.$inject = ['$state'];
  function DemoController($state) {
    this.one = function()  {
      $state.go('one');
    }
  
    this.two = function() {
      $state.go('two');
    }
  }
  </code></pre>