fixes mini list view animations

src/Umbraco.Web.UI.Client/src/common/directives/components/umbminilistview.directive.js

@@ -8,10 +8,9 @@
             scope.search = "";
             scope.miniListViews = [];
             scope.breadcrumb = [];
+            scope.listViewAnimation = "";
 
             var miniListViewsHistory = [];
-            var goingForward = true;
-            var skipAnimation = true;
 
             function onInit() {
                 open(scope.node);
@@ -24,8 +23,6 @@
                     node.icon = iconHelper.convertFromLegacyIcon(node.icon);
                 }
 
-                goingForward = true;
-
                 var miniListView = {
                     node: node,
                     loading: true,
@@ -41,6 +38,7 @@
 
                 // clear and push mini list view in dom so we only render 1 view
                 scope.miniListViews = [];
+                scope.listViewAnimation = "in";
                 scope.miniListViews.push(miniListView);
 
                 // store in history so we quickly can navigate back
@@ -106,7 +104,7 @@
             scope.clickBreadcrumb = function(ancestor) {
 
                 var found = false;
-                goingForward = false;
+                scope.listViewAnimation = "out";
 
                 angular.forEach(miniListViewsHistory, function(historyItem, index){
                     // We need to make sure we can compare the two id's. 
@@ -173,22 +171,6 @@
                 });
             }, 500);
 
-            /* Animation */
-            scope.getMiniListViewAnimation = function() {
-
-                // disable the first "slide-in-animation"" if the start node is a list view
-                if(scope.node.metaData && scope.node.metaData.IsContainer && skipAnimation || scope.node.isContainer && skipAnimation) {
-                    skipAnimation = false;
-                    return;
-                }
-
-                if(goingForward) {
-                    return 'umb-mini-list-view--forward';
-                } else {
-                    return 'umb-mini-list-view--backwards';
-                }
-            };
-
             onInit();
 
         }

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

@@ -39,59 +39,47 @@
 }
 
 /* Animations */
-
-/* Forward */ 
-
-.umb-mini-list-view--forward-enter, 
-.umb-mini-list-view--forward-leave
-{ 
+.umb-mini-list-view.ng-animate {
     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 {
+/* Forward */ 
+.umb-mini-list-view--forward.ng-enter {
+    left: 100%;
+    opacity: 0;
+}
+
+.umb-mini-list-view--forward.ng-enter.ng-enter-active {
     left: 0;
     opacity: 1;
 }
 
-.umb-mini-list-view--forward-leave {
+.umb-mini-list-view--forward.ng-leave {
     left: 0;
 }
 
-.umb-mini-list-view--forward-leave.umb-mini-list-view--forward-leave-active{
+.umb-mini-list-view--forward.ng-leave.ng-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 {
+.umb-mini-list-view--backwards.ng-enter {
     right: 100%;
 }
 
-.umb-mini-list-view--backwards-enter.umb-mini-list-view--backwards-enter-active {
+.umb-mini-list-view--backwards.ng-enter.ng-enter-active {
     right: 0;
     opacity: 1;
 }
 
-.umb-mini-list-view--backwards-leave {
+.umb-mini-list-view--backwards.ng-leave {
     left: 0;
 }
 
-.umb-mini-list-view--backwards-leave.umb-mini-list-view--backwards-leave-active{
+.umb-mini-list-view--backwards.ng-leave.ng-leave-active {
     right: -100%;
     opacity: 0;
 }

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

@@ -1,5 +1,5 @@
 <div ng-controller="Umbraco.Overlays.TreePickerController as vm">
-    <div ng-hide="miniListView">
+    <div ng-hide="vm.miniListView">
 
         <div class="umb-language-picker" ng-if="vm.showLanguageSelector && vm.languages.length > 1" on-outside-click="vm.page.languageSelectorIsOpen = false" style="padding-bottom: 5px">
             <div class="umb-language-picker__toggle" ng-click="vm.toggleLanguageSelector()">

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

@@ -1,6 +1,8 @@
 <div>
 
-    <div ng-repeat="miniListView in miniListViews" ng-animate="getMiniListViewAnimation()">
+    <div class="umb-mini-list-view umb-animated" 
+        ng-class="{'umb-mini-list-view--forward': listViewAnimation === 'in', 'umb-mini-list-view--backwards': listViewAnimation === 'out'}" 
+        ng-repeat="miniListView in miniListViews">
 
         <div class="umb-mini-list-view__title">
             <i class="umb-mini-list-view__title-icon {{ miniListView.node.icon }}"></i>