wip tree animations

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

@@ -39,7 +39,7 @@ angular.module("umbraco.directives")
             });
 
             //flag to enable/disable delete animations, default for an item is true
-            var deleteAnimations = true;
+            scope.deleteAnimations = true;
 
             // updates the node's DOM/styles
             function setupNodeDom(node, tree) {
@@ -63,7 +63,7 @@ angular.module("umbraco.directives")
                 //do timeout so that it re-enables them after this digest
                 $timeout(function () {
                     //enable delete animations
-                    deleteAnimations = true;
+                    scope.deleteAnimations = true;
                 }, 0, false);
             }
 
@@ -150,7 +150,7 @@ angular.module("umbraco.directives")
                 if (scope.node.showHideAnimation) {
                     return scope.node.showHideAnimation;
                 }
-                if (deleteAnimations && scope.node.expanded) {
+                if (scope.deleteAnimations && scope.node.expanded) {
                     return { leave: 'tree-node-delete-leave' };
                 }
                 else {
@@ -165,7 +165,7 @@ angular.module("umbraco.directives")
             */
             scope.load = function (node) {
                 if (node.expanded && !node.metaData.isContainer) {
-                    deleteAnimations = false;
+                    scope.deleteAnimations = false;
                     umbTreeCtrl.emitEvent("treeNodeCollapsing", { tree: scope.tree, node: node, element: element });
                     node.expanded = false;
                 }

src/Umbraco.Web.UI.Client/src/less/application/animations.less

@@ -45,15 +45,20 @@
 
 
 // TREE ANIMATION
- 
-.tree-node-delete-leave { 
-    -webkit-animation: leave 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
-    -moz-animation: leave 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
-    -o-animation: leave 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
+
+.umb-tree-item.ng-animate {
+    display: none;
+}
+
+.umb-tree-item--deleted.ng-leave {
     animation: leave 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
     display: block;
-    position: relative;    
-} 
+    position: relative;
+}
+
+.umb-tree-item--deleted.ng-leave * { 
+    color: @red !important;
+}
 
 @-webkit-keyframes leave {
     to {
@@ -131,11 +136,6 @@
     }
 }
 
-.tree-node-delete-leave * { 
-    color:@red !important;
-}
-
-
 .tree-node-slide-up
 { 
     opacity:1;

src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html

@@ -1,4 +1,4 @@
-<li data-element="tree-item-{{::node.dataElement}}" ng-class="{'current': (node == currentNode), 'has-children': node.hasChildren}" on-right-click="altSelect(node, $event)">
+<li class="umb-tree-item" data-element="tree-item-{{::node.dataElement}}" ng-class="{'current': (node == currentNode), 'has-children': node.hasChildren, 'umb-tree-item--deleted': deleteAnimations}" on-right-click="altSelect(node, $event)">
     <div ng-class="getNodeCssClass(node)" ng-swipe-right="options(node, $event)" ng-dblclick="load(node)" >
         <ins data-element="tree-item-expand" 
             ng-class="{'icon-navigation-right': !node.expanded || node.metaData.isContainer, 'icon-navigation-down': node.expanded && !node.metaData.isContainer}" 
@@ -6,7 +6,7 @@
             ng-click="load(node)">&nbsp;</ins>
 
         <i class="icon umb-tree-icon sprTree" ng-class="::node.cssClass" title="{{::node.routePath}}" ng-click="select(node, $event)" ng-style="::node.style"></i>
-        <a class="umb-tree-item__label" ng-href="#/{{::node.routePath}}" ng-click="select(node, $event)">{{::node.name}}</a>
+        <a class="umb-tree-item__label" ng-href="#/{{::node.routePath}}" ng-click="select(node, $event)">{{::node.name}} {{deleteAnimations}}</a>
     
         <!-- NOTE: These are the 'option' elipses -->
         <a data-element="tree-item-options" class="umb-options" ng-click="options(node, $event)" ng-if="::node.menuUrl"><i></i><i></i><i></i></a>
@@ -14,7 +14,7 @@
     </div>
     
     <ul ng-class="{collapsed: !node.expanded}">
-        <umb-tree-item  ng-repeat="child in node.children track by child.id" enablelistviewexpand="{{enablelistviewexpand}}" tree="tree" current-node="currentNode" node="child" section="{{section}}" ng-animate="animation()"></umb-tree-item>
+        <umb-tree-item class="umb-animated" ng-repeat="child in node.children track by child.id" enablelistviewexpand="{{enablelistviewexpand}}" tree="tree" current-node="currentNode" node="child" section="{{section}}"></umb-tree-item>
     </ul>
 </li>
 

src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html

@@ -2,13 +2,21 @@
     <li class="root">
         <div data-element="tree-root" ng-class="getNodeCssClass(tree.root)" ng-hide="hideheader" on-right-click="altSelect(tree.root, $event)">
             <h5>
-                <a href="#/{{section}}" ng-click="select(tree.root, $event)" class="root-link">
+                <a ng-href="#/{{section}}" ng-click="select(tree.root, $event)" class="root-link">
                     <i ng-if="enablecheckboxes === 'true'" ng-class="selectEnabledNodeClass(tree.root)"></i> 
                     {{tree.name}}
                 </a>
             </h5>
             <a data-element="tree-item-options" class="umb-options" ng-hide="tree.root.isContainer || !tree.root.menuUrl" ng-click="options(tree.root, $event)" ng-swipe-right="options(tree.root, $event)"><i></i><i></i><i></i></a>
         </div>
-        <umb-tree-item ng-repeat="child in tree.root.children" enablelistviewexpand="{{enablelistviewexpand}}" node="child" current-node="currentNode" tree="this" section="{{section}}" ng-animate="animation()"></umb-tree-item>
+        <umb-tree-item
+            class="umb-animated"
+            ng-repeat="child in tree.root.children"
+            enablelistviewexpand="{{enablelistviewexpand}}"
+            node="child"
+            current-node="currentNode"
+            tree="this"
+            section="{{section}}">
+        </umb-tree-item>
     </li>
 </ul>