title: Angular 1.2.12 and ng-view animation
body: <p>I've got a frustrating problem with animating route changes in with Angular.  There's no animation, and in some configurations I've tried following various online resources the classes flash onto the elements, and others (read: most) the classes aren't even applied to the elements.</p>
  
  <p>Here's my index.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Drop Calculator&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/animate.css"&gt;
  
          &lt;!-- LessCSS --&gt;
          &lt;link rel="stylesheet/less" type="text/css" href="css/main.less"&gt;
          &lt;script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.2/less.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body ng-app="DropCalculator" ng-controller="MainCtrl"&gt;
          &lt;main class="container"&gt;
              &lt;vl-keypad&gt;&lt;/vl-keypad&gt;
              &lt;div ng-view class="animate"&gt;&lt;/div&gt;
          &lt;/main&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.angularjs.org/1.2.12/angular-animate.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-route.js"&gt;&lt;/script&gt;
          &lt;script src="js/app.js"&gt;&lt;/script&gt;
          &lt;script src="js/directives.js"&gt;&lt;/script&gt;
          &lt;script src="js/services.js"&gt;&lt;/script&gt;
          &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the animate.css</p>
  
  <pre><code>.animate-ng-enter, .animate-ng-leave {
      -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
      transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  }
  .animate-ng-enter {
      -webkit-transform:translateX(100%);
  }
  .animate-ng-enter.ng-enter-active {
      -webkit-transform:translateX(0%);
  }
  .animate-ng-leave.ng-leave-active {
      -webkit-transform:translateX(-100%);
  }
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>angular.module('DropCalculator', ['ngAnimate', 'ngRoute'])
  .config(['$routeProvider', function($routeProvider){
      $routeProvider
      .when('/', {
          templateUrl : 'partials/home.html'
      })
      .when('/results', {
          templateUrl : 'partials/results.html'
      })
      .otherwise({
          redirectTo : '/'
      })
  }])
  </code></pre>
  
  <p>The route changes just fine, but animations aren't played.  I don't even think the animation classes are applied to the elements.  I've tried different variations of where the <code>class="animate"</code> attribute is applied to no avail.   I've tried different CSS properties too.</p>
  
  <p>This is frustrating! Any ideas?</p>