javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(items): better item remove animations

Browse Source
This commit is contained in:
Max Lynch
2014-12-11 16:01:36 -06:00
parent 35173c8d32
commit 9ddce8f149
2 changed files with 34 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
scss/_items.scss
View File

@@ -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
// -------------------------------

4
scss/_variables.scss
View File

@@ -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;