Skip to content
Open
Show file tree
Hide file tree
Changes from all 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`
.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.
}

.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.

// Transition utility classes
.item-sliding-transition-open .item {
transition: transform 250ms cubic-bezier(0.25, 1, 0.5, 1);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be using tokens here, we already have some for the time and cubic bezier. If the cubic-bezier ones don't match with what we need here, please align with Mariana to see if it makes sense to create a new token, like @joselrio did recently

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I talked with Mariana regarding this one she said that no existing token is compatible with this. I will ask if it makes sense to create a new token.

}

.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
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