-
Notifications
You must be signed in to change notification settings - Fork 13.4k
feat(item-sliding): added specific animations for ionic #31103
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: next
Are you sure you want to change the base?
Changes from all commits
a6ea277
9675242
4ede42f
c0338ab
a247ac5
7468b4c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| 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"; | ||
|
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); | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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; | ||
| } | ||
| 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; | ||
| } |
| 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; | ||
| } |
Uh oh!
There was an error while loading. Please reload this page.