How to disable ion-item highlight animation?

Ionic Framework
1

Hi!

How can I disable ion-item highlight transition?

--transition css variable not work.

image

This code is not work:

ion-item::part(native) {
	.item-highlight {
		transition: none !important;
	}
}

Thank you for help!

2

Has anyone already found a solution? Iā€™m also looking for a solution to this.

Ionic 6 with Vue

1 Like
3

Do you want to remove the highlight completely or just remove the transition?
In ionic 7, they removed highlights of inputs that are inside ion-item elements completely. So if thats the case, just update to ionic 7 i guess. To remove the highlight in ionic 6 you could use the --highlight-height property on the item if i remember correctly.
If you want to remove the transition only, you could remove the hightlight with --highlight-height and display the border instead by using classes like item-has-focus, and so on. The border has no css transitions.