clean up animation classes

src/Umbraco.Web.UI.Client/src/less/components/umb-mini-list-view.less

@@ -29,4 +29,62 @@
     opacity: 1;
     text-decoration: none;
     color: @black;
+}
+
+/* Animations */
+
+/* Forward */ 
+
+.umb-mini-list-view--forward-enter, 
+.umb-mini-list-view--forward-leave
+{ 
+    transition: 120ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
+    position: relative;
+    display: block;
+} 
+ 
+.umb-mini-list-view--forward-enter {
+    left: 100%;
+}
+
+.umb-mini-list-view--forward-enter.umb-mini-list-view--forward-enter-active {
+    left: 0;
+    opacity: 1;
+}
+
+.umb-mini-list-view--forward-leave {
+    left: 0;
+}
+
+.umb-mini-list-view--forward-leave.umb-mini-list-view--forward-leave-active{
+    left: -100%;
+    opacity: 0;
+}
+
+/* Backwards */
+
+.umb-mini-list-view--backwards-enter, 
+.umb-mini-list-view--backwards-leave
+{ 
+    transition: 120ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
+    position: relative;
+    display: block;
+} 
+ 
+.umb-mini-list-view--backwards-enter {
+    right: 100%;
+}
+
+.umb-mini-list-view--backwards-enter.umb-mini-list-view--backwards-enter-active {
+    right: 0;
+    opacity: 1;
+}
+
+.umb-mini-list-view--backwards-leave {
+    left: 0;
+}
+
+.umb-mini-list-view--backwards-leave.umb-mini-list-view--backwards-leave-active{
+    right: -100%;
+    opacity: 0;
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-table.less

@@ -292,60 +292,4 @@ input.umb-table__input {
         font-size: 20px;
     }
 
-}
-
-
-/* Forward */ 
-.animate-enter, 
-.animate-leave
-{ 
-    transition: 120ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-    position: relative;
-    display: block;
-} 
- 
-.animate-enter {
-    left: 100%;
-}
-
-.animate-enter.animate-enter-active {
-    left: 0;
-    opacity: 1;
-}
-
-.animate-leave {
-    left: 0;
-}
-
-.animate-leave.animate-leave-active{
-    left: -100%;
-    opacity: 0;
-}
-
-/* Backwards */
-
-.animate-reverse-enter, 
-.animate-reverse-leave
-{ 
-    transition: 120ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-    position: relative;
-    display: block;
-} 
- 
-.animate-reverse-enter {
-    right: 100%;
-}
-
-.animate-reverse-enter.animate-reverse-enter-active {
-    right: 0;
-    opacity: 1;
-}
-
-.animate-reverse-leave {
-    left: 0;
-}
-
-.animate-reverse-leave.animate-reverse-leave-active{
-    right: -100%;
-    opacity: 0;
 }

src/Umbraco.Web.UI.Client/src/views/common/overlays/treepicker/treepicker.controller.js

@@ -628,11 +628,11 @@ angular.module("umbraco").controller("Umbraco.Overlays.TreePickerController",
 
 		}
 
-		$scope.animationTest = function() {
+		$scope.getMiniListViewAnimation = function() {
 			if(goingForward) {
-				return 'animate';
+				return 'umb-mini-list-view--forward';
 			} else {
-				return 'animate-reverse';
+				return 'umb-mini-list-view--backwards';
 			}
 		}
 

src/Umbraco.Web.UI.Client/src/views/common/overlays/treepicker/treepicker.html

@@ -36,8 +36,7 @@
 
     </div>
 
-    <div ng-repeat="miniListView in miniListViews" ng-animate="animationTest()">
-
+    <div ng-repeat="miniListView in miniListViews" ng-animate="getMiniListViewAnimation()">
 
         <a ng-if="!model.startNodeId" href="" class="umb-mini-list-view__back" ng-click="exitMiniListView(miniListView.node)">
             <i class="icon-arrow-left" style="margin-right: 5px;"></i>Back