Hello,
How can we animate slide up & down animation for ion-buttons?
I have added six buttons in the footer. If we click on the last button (as marked in images), I want to add slide up and down animation to toggle more buttons.
Code snippet:
<ion-footer> <ion-toolbar>
<ion-buttons text-center>
<ion-grid>
<ion-row>
<ion-col col-2>
<button ion-button icon-only>
<ion-icon name="home"></ion-icon>
</button>
</ion-col>
<ion-col col-2>
<button ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-col>
<ion-col col-2>
<button ion-button icon-only>
<ion-icon name="qr-scanner"></ion-icon>
</button>
</ion-col>
<ion-col col-2>
<button ion-button icon-only>
<ion-icon name="cart"></ion-icon>
</button>
</ion-col>
<ion-col col-2>
<button ion-button icon-only>
<ion-icon name="clipboard"></ion-icon>
</button>
</ion-col>
<ion-col col-2 (click) = "toggleMoreMenu()">
<button ion-button icon-only>
<ion-icon
name="arrow-dropup"
*ngIf = "menuCollpased"></ion-icon>
<ion-icon
name="arrow-dropdown"
*ngIf = "!menuCollpased"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-buttons>
<ion-buttons text-center>
<ion-grid>
<ion-row>
<ion-col col-2>
<button ion-button icon-only>
<ion-icon name="add"></ion-icon>
</button>
</ion-col>
<ion-col col-2>
<button ion-button icon-only>
<ion-icon name="book"></ion-icon>
</button>
</ion-col>
<ion-col col-2>
<button ion-button icon-only>
<ion-icon name="list"></ion-icon>
</button>
</ion-col>
<ion-col col-2>
<button ion-button icon-only>
<ion-icon name="mail"></ion-icon>
</button>
</ion-col>
<ion-col col-2>
<button ion-button icon-only>
<ion-icon name="notifications"></ion-icon>
</button>
</ion-col>
<ion-col col-2>
<button ion-button icon-only>
<ion-icon name="options"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-buttons> </ion-toolbar> </ion-footer>