feat(item-sliding): added specific animations for ionic by os-davidlourenco · Pull Request #31103 · ionic-team/ionic-framework

os-davidlourenco · 2026-04-29T16:43:19Z

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

…onic

vercel · 2026-04-29T16:43:24Z

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

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	May 5, 2026 5:18pm

thetaPC

Update the branch to be up to sync with next. We had to make changes to the item sliding tests that were causing tests that were failing while you were out. I would recommend reviewing the fix in case your tests need to be updated.

brandyscarney

Left a comment on the ticket!

brandyscarney · 2026-05-06T14:36:16Z

+    if (opening) {
+      expandableOption.classList.remove('item-sliding-expandable-snapback');
+      expandableOption.classList.add('item-sliding-expandable-open');
+    } else {
+      expandableOption.classList.remove('item-sliding-expandable-open');
+      expandableOption.classList.add('item-sliding-expandable-snapback');
+    }


What is the purpose of these classes? There are no styles for them in the scss files.

brandyscarney · 2026-05-06T18:27:05Z

-  z-index: $z-index-item-options + 1;
-  pointer-events: none;
-  will-change: transform;
+// During drag on native (ios/md), disable transition — matches former inline `transition: none`


Shouldn't this go in item-sliding.native.scss if it only applies to native?

brandyscarney · 2026-05-06T18:51:16Z

Everything in this file can go in item-sliding.native.scss since it's the same for ios and md.

brandyscarney · 2026-05-06T18:51:19Z

Everything in this file can go in item-sliding.native.scss since it's the same for ios and md.

brandyscarney · 2026-05-06T18:52:51Z

+      this.el.classList.remove('item-sliding-ionic-confirm-item-in');
+      this.el.classList.add('item-sliding-ionic-confirm-item-back');
+      this.item.style.transform = 'translate3d(0, 0, 0)';
+      await this.delay(480, signal);


Where does 480 come from? Shouldn't it match $ion-transition-time-500?

brandyscarney · 2026-05-06T18:54:01Z

+      this.el.classList.remove('item-sliding-ionic-confirm-item-back');
+      this.el.classList.add('item-sliding-ionic-confirm-item-in');
+      this.item.style.transform = `translate3d(${-offScreenPosition}px, 0, 0)`;
+      await this.delay(150, signal);


Where does 150 come from?

brandyscarney · 2026-05-06T18:57:34Z

+      this.el.classList.remove('item-sliding-ionic-confirm-item-back');
+      this.el.classList.add('item-sliding-ionic-confirm-item-in');


Why do we need ionic in the class name? It should be theme-agnostic but it will only apply styles for ionic.

thetaPC

I only reviewed the test. I'll leave the rest to the current reviewers.

thetaPC · 2026-05-06T22:05:58Z

 const FULL_ANIMATION_MS = 1100;

-configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr', 'rtl'] }).forEach(({ title, config }) => {
+configs({ modes: ['ios', 'md'], directions: ['ltr', 'rtl'] }).forEach(({ title, config }) => {


These are the defaults so we don't need them.

Suggested change

configs({ modes: ['ios', 'md'], directions: ['ltr', 'rtl'] }).forEach(({ title, config }) => {

configs().forEach(({ title, config }) => {

thetaPC · 2026-05-06T22:06:15Z

      const ionSwipe = await page.spyOnEvent('ionSwipe');
      const item = page.locator('ion-item-sliding');
+      await expect(item).toBeVisible();
+      await page.waitForChanges();


Why are these changes needed? The tests were passing before without them. I also removed them locally and the tests are passing fine without them.

thetaPC · 2026-05-06T22:06:45Z

+/**
+ * Test for Ionic theme that has a different full swipe animation behavior.
+ */
+configs({ modes: ['ionic-md'], directions: ['ltr', 'rtl'] }).forEach(({ title, config }) => {


The default for directions is ltr and rtl so we don't need to include them.

Suggested change

configs({ modes: ['ionic-md'], directions: ['ltr', 'rtl'] }).forEach(({ title, config }) => {

configs({ modes: ['ionic-md'] }).forEach(({ title, config }) => {

thetaPC · 2026-05-06T22:08:30Z

+      await page.mouse.move(startX, y);
+      await page.mouse.down();
+      await page.mouse.move(endX, y, { steps: 2 }); // try 1–3; lower = faster
+      await page.mouse.up();


Why are we not using our dragElementBy util? The same question for the other tests.

thetaPC · 2026-05-06T22:09:54Z

+      const peek = config.direction === 'rtl' ? 120 : -120;
+      await dragElementBy(item, page, peek);


Would this check be beneficial to add to ios and md?

thetaPC · 2026-05-06T22:11:21Z

+      expect(openAmount).toBe(0);
+    });
+
+    test('should NOT trigger full swipe animation for non-expandable options', async ({ page }) => {


This doesn't seem to be any different from the test on ios and md. Let's just merge them together.

os-davidlourenco added 4 commits April 28, 2026 17:08

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

a6ea277

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

9675242

feat(item-sliding): added specific classes for swipe animations for i…

4ede42f

…onic

feat(item-sliding): corrected ionic thresholds

c0338ab

os-davidlourenco requested a review from a team as a code owner April 29, 2026 16:43

os-davidlourenco requested a review from OS-jacobbell April 29, 2026 16:43

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

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

vercel Bot had a problem deploying to Preview April 30, 2026 10:35 Failure

feat(item-sliding): added velocity validation for open options

a247ac5

os-davidlourenco force-pushed the ROU-12715 branch from 6dc87ba to a247ac5 Compare April 30, 2026 10:38

vercel Bot deployed to Preview April 30, 2026 10:40 View deployment

vercel Bot deployed to Preview April 30, 2026 11:08 View deployment

feat(item-sliding): improve full swipe animation separation

7468b4c

os-davidlourenco force-pushed the ROU-12715 branch from c2f1465 to 7468b4c Compare April 30, 2026 11:45

vercel Bot deployed to Preview April 30, 2026 11:47 View deployment

BenOsodrac requested changes Apr 30, 2026

View reviewed changes

Comment thread core/src/components/item-sliding/item-sliding.ionic.scss Outdated

Comment thread core/src/components/item-sliding/item-sliding.ionic.scss Outdated

Comment thread core/src/components/item-sliding/item-sliding.common.scss Outdated

feat(item-sliding): updated token library and ionic styles

6d983d2

vercel Bot deployed to Preview May 5, 2026 08:42 View deployment

thetaPC requested changes May 5, 2026

View reviewed changes

Merge branch 'next' into ROU-12715

9b21fd3

vercel Bot deployed to Preview May 5, 2026 17:18 View deployment

brandyscarney requested changes May 6, 2026

View reviewed changes

thetaPC requested changes May 6, 2026

View reviewed changes

		this.el.classList.remove('item-sliding-ionic-confirm-item-back');
		this.el.classList.add('item-sliding-ionic-confirm-item-in');

	configs({ modes: ['ios', 'md'], directions: ['ltr', 'rtl'] }).forEach(({ title, config }) => {
	configs().forEach(({ title, config }) => {

	configs({ modes: ['ionic-md'], directions: ['ltr', 'rtl'] }).forEach(({ title, config }) => {
	configs({ modes: ['ionic-md'] }).forEach(({ title, config }) => {

		const peek = config.direction === 'rtl' ? 120 : -120;
		await dragElementBy(item, page, peek);

Conversation

os-davidlourenco commented Apr 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

vercel Bot commented Apr 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

thetaPC left a comment

Choose a reason for hiding this comment

Uh oh!

brandyscarney left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thetaPC left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

os-davidlourenco commented Apr 29, 2026 •

edited

Loading

vercel Bot commented Apr 29, 2026 •

edited

Loading