Change animations or transitions(Ionic 4)

Ionic Framework
1

Hey there,

I was wondering if i can change animation/ transition in ion-fab. Let me explain, you can have an ion-fab-list inside an ion-fab, so when you tap that ion-fab, the ion-fab-list makes a transition or animation to be showed.

It is possible to change that transition?

fab-list
fab-list.gif474×680 1.02 MB

Thanks!

2

Sure, adapt it to your needs, here’s my example, put it somewhere into your styles:

@keyframes zoom-in {

    from {

        opacity: .5;
        transform: scale3d(.5, .5, .5);
    } 
    
    to {

       opacity: 1;
    }

}

ion-fab[horizontal="end"][vertical="bottom"] {

	& ion-fab-list {

        animation: zoom-in .25s;

    }

}

Hope it helps.

Cheers
Unkn0wn0x