Disable ion-checkbox activation animation of ion-item

Ionic Framework
1

When an is clicked inside an the entire ion-item briefly turns gray (animation). Through some debugging I found that the style “activated” is attached to the enclosing ion-item during the click. The style causes the highlighting of the ion-item. It is sufficient for the checkbox itself to animate. As it stands now, I get two animations, one for the checkbox and another for the enclosing ion-item.

I would like to entirely remove any animation effects on the enclosing ion-item of the ion-checkbox. I’d like to limit the behavior to a specific UI, not the entire app.

How can I do that?

Thanks
Jason

2

Hi @jason314 try this example

<ion-list>
      <ion-item class="custom-checkbox">
        <ion-label>check box</ion-label>
        <ion-checkbox slot="end" ></ion-checkbox>
      </ion-item>
    </ion-list>

css for disable animation

 .custom-checkbox{
        --ripple-color: transparent;
        --background-hover: transparent;
    }
3

That worked. How did you know to do that? Where did you looking to determined what was happening? I’d like to learn.

Thanks