From 9ddce8f14964e96c3bdd4823f2f4ffcd5eef927d Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Thu, 11 Dec 2014 16:01:36 -0600
Subject: [PATCH] feat(items): better item remove animations

---
 scss/_items.scss     | 30 ++++++++++++++++++++++++++++++
 scss/_variables.scss |  4 ++++
 2 files changed, 34 insertions(+)

diff --git a/scss/_items.scss b/scss/_items.scss
index ebedbab352..24ddd8c34f 100644
--- a/scss/_items.scss
+++ b/scss/_items.scss
@@ -639,6 +639,36 @@ button.item.item-button-right {
   @include translate3d(-$item-right-edit-open-width, 0, 0);
 }
 
+.item-remove-animate {
+  &.ng-leave {
+    @include transition-duration( $item-remove-transition-duration );
+  }
+  &.ng-leave .item-content,
+  &.ng-leave:last-of-type {
+    @include transition-duration( $item-remove-transition-duration );
+    @include transition-timing-function( $item-remove-transition-function );
+    @include transition-property( all );
+  }
+
+  &.ng-leave.ng-leave-active .item-content {
+    opacity:0;
+    -webkit-transform: translate3d(-100%, 0, 0) !important;
+    transform: translate3d(-100%, 0, 0) !important;
+  }
+  &.ng-leave.ng-leave-active:last-of-type {
+    opacity: 0;
+  }
+
+  &.ng-leave.ng-leave-active ~ ion-item:not(.ng-leave) {
+    -webkit-transform: translate3d(0, unquote('-webkit-calc(-100% + 1px)'), 0);
+    transform: translate3d(0, calc(-100% + 1px), 0);
+    @include transition-duration( $item-remove-transition-duration );
+    @include transition-timing-function( $item-remove-descendents-transition-function );
+    @include transition-property( all );
+  }
+}
+
+
 
 // Item Left Edit Button
 // -------------------------------
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 997d8bb528..c021ee37b3 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -378,6 +378,10 @@ $item-default-active-border:      $item-light-active-border !default;
 $item-edit-transition-duration:   250ms !default;
 $item-edit-transition-function:   ease-in-out !default;
 
+$item-remove-transition-duration:   300ms !default;
+$item-remove-transition-function:   ease-in !default;
+$item-remove-descendents-transition-function:  cubic-bezier(.25,.81,.24,1) !default;
+
 $item-left-edit-left:             8px !default;  // item's left side edit's "left" property
 
 $item-right-edit-open-width:      50px !default;