List demo with animations!

dist/ionic-angular.js

@@ -180,7 +180,7 @@ angular.module('ionic.ui.content', [])
   }
 })
 ;
-angular.module('ionic.ui.list', ['ionic.service'])
+angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
 
 .directive('listItem', function() {
   return {
@@ -194,10 +194,13 @@ angular.module('ionic.ui.list', ['ionic.service'])
                 ' <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);
+      }
     }
   }
 })
@@ -209,10 +212,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>' + 
@@ -221,6 +225,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));
       }
     }

dist/ionic-ios7.css

@@ -1073,7 +1073,7 @@ a.list-item {
   background-color: #fff;
   z-index: 1;
   padding: 15px 15px;
-  -webkit-transition: left 0.2s ease-in-out; }
+  -webkit-transition: left 0.2s ease-in-out, right 0.2s ease-in-out; }
   .list-item-content > i:last-child {
     float: right; }
 

dist/ionic.css

@@ -1161,7 +1161,7 @@ a.list-item {
   background-color: #fff;
   z-index: 1;
   padding: 15px 15px;
-  -webkit-transition: left 0.2s ease-in-out; }
+  -webkit-transition: left 0.2s ease-in-out, right 0.2s ease-in-out; }
   .list-item-content > i:last-child {
     float: right; }
 

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

@@ -1,4 +1,4 @@
-angular.module('ionic.ui.list', ['ionic.service'])
+angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
 
 .directive('listItem', function() {
   return {
@@ -12,10 +12,13 @@ angular.module('ionic.ui.list', ['ionic.service'])
                 ' <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;
+}
 
-       -webkit-transition: -webkit-transform 1s ease-in-out;
-               transition:         transform 1s ease-in-out;
-        */
+.my-repeat-animation > .ng-enter {
+  left:-10px;
+  opacity:0;
 }
-      .reveal-animation.ng-enter {
-        -webkit-transition: .2s ease-in-out all;
-        -webkit-transform:translate3d(100%,0,0) ;
+.my-repeat-animation > .ng-enter.ng-enter-active {
+  left:0;
+  opacity:1;
 }
-      .reveal-animation.ng-enter-active {
-        -webkit-transform:translate3d(0,0,0) ;
+
+.my-repeat-animation > .ng-leave {
+  left:0;
+  opacity:1;
 }
-      .reveal-animation.ng-leave {
-        -webkit-transition: .2s ease-in-out all;
-        -webkit-transform:translate3d(0%,0,0);
+.my-repeat-animation > .ng-leave.ng-leave-active {
+  left:-10px;
+  opacity:0;
 }
-      .reveal-animation.ng-leave-active {
-        -webkit-transition: .2s ease-in-out all;
-        -webkit-transform:translate3d(-100%,0,0);
+
+.my-repeat-animation > .ng-move {
+  opacity:0.5;
 }
+.my-repeat-animation > .ng-move.ng-move-active {
+  opacity:1;
+}
+
     </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;
+              }
             }]
           },
           {

scss/ionic/_listview.scss

@@ -107,7 +107,7 @@ a.list-item {
 
   padding: 15px 15px;
 
-  -webkit-transition: left 0.2s ease-in-out;
+  -webkit-transition: left 0.2s ease-in-out, right 0.2s ease-in-out;
 
   // Align icons to the right
   > i:last-child {