chore(sample): update animations to Angular 1.2

Author: nateabele

sample/contacts.detail.html

@@ -9,7 +9,7 @@ <h2>{{contact.name}}</h2>
       <a ui-sref="contacts.detail.item({itemId:item.id})">{{item.type}}</a>
     </li>
   </ul>
-  <div ui-view ng-animate="{enter:'fade-enter'}">
+  <div ui-view class="slide">
     <!-- Example of default content. This content will be replace as soon as
          this ui-view is populate with a template -->
     <small class="muted">Click on a contact item to view and/or edit it.</small>

sample/contacts.html

@@ -18,10 +18,10 @@
       <button class="btn" ng-click="goToRandom()">Show random contact</button>
 
       <!-- Another named view -->
-      <div ui-view="menuTip"></div>
+      <div ui-view="menuTip" class="slide"></div>
     </div>
   </div>
 
   <!-- Our unnamed main ui-view for this template -->
-  <div ui-view class="span9" ng-animate="{enter:'fade-enter'}"></div>
+  <div ui-view class="span9 slide"></div>
 </div>

sample/index.html

@@ -10,8 +10,9 @@
     <link rel="stylesheet" type="text/css" href="styles.css">
 
     <!-- Include both angular.js and angular-ui-router.js-->
-    <script src="../lib/angular-1.1.5.js"></script>
-    <script src="../build/angular-ui-router.js"></script>
+    <script src="../lib/angular-1.2.4/angular.js"></script>
+    <script src="../lib/angular-1.2.4/angular-animate.js"></script>
+    <script src="../release/angular-ui-router.js"></script>
 
     <!-- module.js declares the uiRouterSample module and adds items to $rootScope-->
     <script src="module.js"></script>
@@ -50,7 +51,7 @@
 
     <!-- Here is the main ui-view (unnamed) and will be populate by its immediate children's templates
          unless otherwise explicitly named views are targeted. It's also employing ng-animate. -->
-    <div ui-view class="container" style="margin-top:60px" ng-animate="{enter:'fade-enter'}"></div>
+    <div ui-view class="container slide" style="margin-top: 80px;"></div>
 
 
     <hr>

sample/module.js

@@ -1,5 +1,5 @@
 // Make sure to include the `ui.router` module as a dependency
-angular.module('uiRouterSample', ['ui.router'])
+angular.module('uiRouterSample', ['ui.router', 'ngAnimate'])
     .run(
       [        '$rootScope', '$state', '$stateParams',
       function ($rootScope,   $state,   $stateParams) {

sample/styles.css

@@ -1,11 +1,24 @@
-.fade-enter-setup, .fade-leave-setup {
-  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
+.slide.ng-leave {
+  position: relative;
 }
-.fade-enter-setup,
-.fade-leave-setup.fade-leave-start {
+.slide.ng-enter {
+  position: absolute;
+}
+.slide.ng-enter, .slide.ng-leave {
+  -webkit-transition: -webkit-transform 0.3s ease-in, opacity 0.3s ease-in;
+     -moz-transition: -moz-transform 0.3s ease-in, opacity 0.3s ease-in;
+       -o-transition: -o-transform 0.3s ease-in, opacity 0.3s ease-in;
+          transition: transform 0.3s ease-in, opacity 0.3s ease-in;
+}
+.slide.ng-enter, .slide.ng-leave.ng-leave-active {
+  -webkit-transform: scaleX(0.0001);
+       -o-transform: scaleX(0.0001);
+          transform: scaleX(0.0001);
   opacity: 0;
 }
-.fade-leave-setup,
-.fade-enter-setup.fade-enter-start {
+.slide, .slide.ng-enter.ng-enter-active {
+  -webkit-transform: scaleX(1);
+       -o-transform: scaleX(1);
+          transform: scaleX(1);
   opacity: 1;
-}
+}