Изменить цвет фона слайда белого градиента IONIC 3

Question

Я хотел бы изменить оранжевый фон на зеленый, но с некоторой анимацией, например, когда он оранжевый, он станет зеленым.

Если вы сможете посмотреть два собранных мной гифки, вы поймете, о чем я.

КАК ЭТО В настоящее время -> GIF

КАК Я ХОЧУ ИХ БЫТЬ -> GIF

home.html

<ion-content >
  <div  style="background-color: #f87f0e; padding: 10px;">
    <ion-slides pager>
      <ion-slide >
        <ion-card style="border-radius: 15px;margin-bottom: 35px">
          <ion-card-content style="font-family: sans-serif;">
            <ion-row>
              <ion-col col-12>
                <P style="color: #9e9e9e;float: left;font-size: 15px">BALANCE PERSONAL</P>
              </ion-col>
              <ion-col col-12>
                <H2 style="float: left;font-size: 20px">4.235632 <small>MIC</small></H2>  
              </ion-col>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-slide>
      <ion-slide>
        <ion-card style="border-radius: 15px">
          <ion-card-content style="font-family: sans-serif;">
            <ion-row>
              <ion-col col-12>
                <P style="color: #9e9e9e;float: left;font-size: 15px">BALANCE BUSINESS</P>
              </ion-col>
              <ion-col col-12>
                <H2 style="float: left;font-size: 20px">4.235632 <small>MIC</small></H2>  
              </ion-col>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-slide>
    </ion-slides>
  </div>
</ion-content>

Answer 1

Вам нужно изменить цвет фона для каждой ионной карты.

 <ion-content >
  <div  style="background-color: #f87f0e; padding: 10px;">
    <ion-slides pager>
      <ion-slide >
        <ion-card style="background-color: red; border-radius: 15px;margin-bottom: 35px">
          <ion-card-content style="font-family: sans-serif;">
            <ion-row>
              <ion-col col-12>
                <P style="color: #9e9e9e;float: left;font-size: 15px">BALANCE PERSONAL</P>
              </ion-col>
              <ion-col col-12>
                <H2 style="float: left;font-size: 20px">4.235632 <small>MIC</small></H2>  
              </ion-col>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-slide>
      <ion-slide>
        <ion-card style="background-color: green; border-radius: 15px">
          <ion-card-content style="font-family: sans-serif;">
            <ion-row>
              <ion-col col-12>
                <P style="color: #9e9e9e;float: left;font-size: 15px">BALANCE BUSINESS</P>
              </ion-col>
              <ion-col col-12>
                <H2 style="float: left;font-size: 20px">4.235632 <small>MIC</small></H2>  
              </ion-col>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-slide>
    </ion-slides>
  </div>
</ion-content>