Disable ion-checkbox activation animation of ion-item

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?


Hi @jason314 try this example

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

css for disable animation

        --ripple-color: transparent;
        --background-hover: transparent;

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