How to apply CSS transitions to ion-content styles

Ionic Framework Ionic Vue
1

I have an ion-content element and the class attribute on that element is switched according to various events in the component. e.g. Clicking different buttons in the component might cause the rendered output to be

<ion-content class="colorSchemeA">

or

<ion-content class="colorSchemeB">

I need to be able to use CSS transitions to smoothly transition the styles when the class is changed. Ordinarily this CSS would work:

<style>
ion-content {
  transition: background 2s;
}
.colorSchemeA {
  --background: red;
}
.colorSchemeA {
  --background: blue;
}
</style>

However this does not work presumably because of the use of show DOM. Is it possible to do something like this? I had a brief look at the animation docs but that seems to revolve around page transitions etc whereas in this case it is just a simple in-component transition that is required, which I hope to be able to achieve with CSS. Thanks you for any tips.

1 Like
2

You can use CSS Shadow Parts to target the background element:

ion-content::part(background) {
  transition: background 2s;
}

You can also target the scrollable element using the scroll part: https://ionicframework.com/docs/api/content#css-shadow-parts. For more info regarding CSS Shadow Parts see: https://ionicframework.com/docs/theming/css-shadow-parts