Skip to content

feat(item-sliding): added specific animations for ionic#31103

Open
os-davidlourenco wants to merge 6 commits intonextfrom
ROU-12715
Open

feat(item-sliding): added specific animations for ionic#31103
os-davidlourenco wants to merge 6 commits intonextfrom
ROU-12715

Conversation

@os-davidlourenco
Copy link
Copy Markdown
Contributor

@os-davidlourenco os-davidlourenco commented Apr 29, 2026

Issue number: resolves internal


What is the current behavior?

The item-slidinghas the same animations for md, iOS and Ionic

What is the new behavior?

New animations were added for the Ionic theme, including:

  • Animation for opening the item-sliding
  • Animation for closing the item-sliding
  • Animation for expandable options

New conditions were also included to ensure a smoother experience:

  • Closing item-sliding by exceeding velocity
  • Selecting an extendable option by exceeding the velocity when options are visible
  • Rubber effect when selecting the option

Does this introduce a breaking change?

  • Yes
  • No

Other information

@os-davidlourenco os-davidlourenco requested a review from a team as a code owner April 29, 2026 16:43
@os-davidlourenco os-davidlourenco added package: core @ionic/core package package: angular @ionic/angular package package: vue @ionic/vue package package: react @ionic/react package labels Apr 29, 2026
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 29, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview, Comment Apr 30, 2026 11:47am

Request Review

@github-actions github-actions Bot removed package: angular @ionic/angular package package: vue @ionic/vue package package: react @ionic/react package labels Apr 29, 2026

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

Comment thread core/src/components/item-sliding/item-sliding.ionic.scss
Comment thread core/src/components/item-sliding/item-sliding.common.scss
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants