List demo with animations!

js/ext/angular/src/directive/ionicList.js

@@ -1,21 +1,24 @@
-angular.module('ionic.ui.list', ['ionic.service'])
+angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
 
 .directive('listItem', function() {
   return {
     restrict: 'E',
     replace: true,
     transclude: true,
-    template:   '<li class="list-item">' +
+    template:   '<li class="list-item">' + 
                 ' <div class="list-item-edit" ng-if="item.canDelete">' +
                 '   <button class="button button-icon"><i class="icon-minus-sign"></i></button>' +
                 ' </div>' +
                 ' <div class="list-item-content" ng-transclude>' +
                 ' </div>' +
                 ' <div class="list-item-buttons" ng-if="item.canSwipe">' +
-                '   <button class="button" ng-class="button.type" ng-repeat="button in item.buttons">{{button.text}}</button>' +
+                '   <button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in item.buttons">{{button.text}}</button>' +
                 ' </div>' +
                 '</li>',
     link: function($scope, $element, $attr) {
+      $scope.buttonClicked = function(button) {
+        button.buttonClicked && button.buttonClicked($scope.item);
+      }
     }
   }
 })
@@ -27,10 +30,11 @@ angular.module('ionic.ui.list', ['ionic.service'])
     transclude: true,
     scope: {
       isEditing: '=',
-      items: '='
+      items: '=',
+      animation: '='
     },
     template: '<ul class="list" ng-class="{\'list-editing\': isEditing}">' +
-                '<list-item ng-repeat="item in items" canDelete="item.canDelete" canSwipe="item.canSwipe">' +
+                '<list-item ng-repeat="item in items | filter:{hide:\'false\'}" canDelete="item.canDelete" canSwipe="item.canSwipe" animation="my-repeat-animation">' +
                 ' {{item.text}}' +
                 ' <i class="{{item.icon}}" ng-if="item.icon"></i>' + 
                 '</list-item>' + 
@@ -39,6 +43,10 @@ angular.module('ionic.ui.list', ['ionic.service'])
       return function($scope, $element, $attr) {
         var lv = new ionic.views.List({el: $element[0]});
 
+        if(attr.animation) {
+          $element.addClass(attr.animation);
+        }
+
         $element.append(transclude($scope));
       }
     }

js/ext/angular/test/list.html

@@ -11,30 +11,39 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
     <style>
-      .reveal-animation {
-        /*
-        -webkit-transform: translate3d(0%, 0, 0);
-                transform: translate3d(0%, 0, 0);
+.my-repeat-animation > .ng-enter, 
+.my-repeat-animation > .ng-leave, 
+.my-repeat-animation > .ng-move {
+  -webkit-transition: 0.2s linear all;
+  transition: 0.2s linear all;
+  position:relative;
+}
+
+.my-repeat-animation > .ng-enter {
+  left:-10px;
+  opacity:0;
+}
+.my-repeat-animation > .ng-enter.ng-enter-active {
+  left:0;
+  opacity:1;
+}
+
+.my-repeat-animation > .ng-leave {
+  left:0;
+  opacity:1;
+}
+.my-repeat-animation > .ng-leave.ng-leave-active {
+  left:-10px;
+  opacity:0;
+}
+
+.my-repeat-animation > .ng-move {
+  opacity:0.5;
+}
+.my-repeat-animation > .ng-move.ng-move-active {
+  opacity:1;
+}
 
-       -webkit-transition: -webkit-transform 1s ease-in-out;
-               transition:         transform 1s ease-in-out;
-        */
-      }
-      .reveal-animation.ng-enter {
-        -webkit-transition: .2s ease-in-out all;
-        -webkit-transform:translate3d(100%,0,0) ;
-      }
-      .reveal-animation.ng-enter-active {
-        -webkit-transform:translate3d(0,0,0) ;
-      }
-      .reveal-animation.ng-leave {
-        -webkit-transition: .2s ease-in-out all;
-        -webkit-transform:translate3d(0%,0,0);
-      }
-      .reveal-animation.ng-leave-active {
-        -webkit-transition: .2s ease-in-out all;
-        -webkit-transform:translate3d(-100%,0,0);
-      }
     </style>
 
   </head>
@@ -73,7 +82,7 @@
           </div>
         </li>
       </list>
-      <list items="items" is-editing="isEditingItems">
+      <list items="items" is-editing="isEditingItems" animation="my-repeat-animation">
       </list>
       <button ng-click="edit()" class="button button-success">Edit</button>
     </content>
@@ -81,7 +90,7 @@
     <script src="../../../../dist/ionic.js"></script>
     <script src="../../../../dist/ionic-angular.js"></script>
     <script>
-      angular.module('navTest', ['ionic.ui.list'])
+      angular.module('navTest', ['ionic.ui.list', 'ngAnimate'])
 
       .controller('TestCtrl', function($scope) {
         $scope.items = [
@@ -90,9 +99,15 @@
             canDelete: true,
             canSwipe: true,
             icon: 'icon-chevron-right',
+            hide: false,
             buttons: [{
               text: 'Kill',
-              type: 'button-danger'
+              type: 'button-danger',
+              buttonClicked: function(item) {
+                // Remove ourselves
+                //$scope.items.splice($scope.items.indexOf(item), 1);
+                item.hide = true;
+              }
             }]
           },
           {