Skip to content
Open
Show file tree
Hide file tree
Changes from 6 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 2 additions & 5 deletions core/src/components/item-option/item-option.ionic.scss
Original file line number Diff line number Diff line change
Expand Up @@ -100,9 +100,6 @@
color: globals.current-color(contrast);
}

// Item Expandable Animation
// --------------------------------------------------

:host(.item-option-expandable) {
transition-timing-function: globals.$ion-transition-curve-expressive;
:host(.item-option-expand-threshold) {
filter: brightness(0.92);
}
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,14 @@ ion-item-sliding .item {
user-select: none;
}

.item-sliding-active-slide .item {
position: relative;

transition: transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
// During drag on native (ios/md), disable transition — matches former inline `transition: none`
Comment thread
os-davidlourenco marked this conversation as resolved.
Outdated
.item-sliding-active-slide.item-sliding-dragging .item {
transition: none;
}

opacity: 1;
z-index: $z-index-item-options + 1;
pointer-events: none;
will-change: transform;
// Native full-swipe animation (250ms ease-out; replaces inline styles on `ion-item`)
.item-sliding-active-slide.item-sliding-full-swipe-transition .item {
transition: transform 250ms ease-out;
Comment thread
os-davidlourenco marked this conversation as resolved.
Outdated
}

.item-sliding-closing ion-item-options {
Expand Down
38 changes: 38 additions & 0 deletions core/src/components/item-sliding/item-sliding.ionic.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
@use "./item-sliding.common";
@use "../../themes/ionic/ionic.globals.scss" as globals;
@import "../../themes/native/native.globals";
Comment thread
os-davidlourenco marked this conversation as resolved.
Outdated

// Transition utility classes
.item-sliding-transition-open .item {
transition: transform 250ms cubic-bezier(0.25, 1, 0.5, 1);
Comment thread
os-davidlourenco marked this conversation as resolved.
Outdated
}

.item-sliding-transition-snapback .item {
transition: transform globals.$ion-transition-time-300 globals.$ion-transition-curve-bounce;
}

// Ionic full-swipe confirm sequence (replaces inline `transition` on item / expandable width)
.item-sliding-ionic-confirm-item-in .item {
transition: transform globals.$ion-transition-time-150 globals.$ion-transition-curve-base;
}

.item-sliding-ionic-confirm-item-back .item {
transition: transform globals.$ion-transition-time-500 globals.$ion-transition-curve-bounce;
}

ion-item-option.item-sliding-expandable-width-in {
transition: width globals.$ion-transition-time-150 globals.$ion-transition-curve-base;
}

ion-item-option.item-sliding-expandable-width-back {
transition: width globals.$ion-transition-time-500 globals.$ion-transition-curve-bounce;
}

.item-sliding-active-slide .item {
position: relative;

opacity: 1;
z-index: $z-index-item-options + 1;
pointer-events: none;
will-change: transform;
}
13 changes: 13 additions & 0 deletions core/src/components/item-sliding/item-sliding.ios.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@use "./item-sliding.common";
@import "../../themes/native/native.globals";

.item-sliding-active-slide .item {
position: relative;

transition: transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);

opacity: 1;
z-index: $z-index-item-options + 1;
pointer-events: none;
will-change: transform;
}
13 changes: 13 additions & 0 deletions core/src/components/item-sliding/item-sliding.md.scss
Comment thread
os-davidlourenco marked this conversation as resolved.
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@use "./item-sliding.common";
@import "../../themes/native/native.globals";

.item-sliding-active-slide .item {
position: relative;

transition: transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);

opacity: 1;
z-index: $z-index-item-options + 1;
pointer-events: none;
will-change: transform;
}
Loading
Loading