Slide up and down animation for ion-buttons in footer

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>
1 Like

I am struggling to do the same functionality , in ionic 2 have you got any solution ?

I found two solutions both worked for me . You have to customize according to your conditions

1> http://arielfaur.github.io/ionic-pullup/
2> https://www.joshmorony.com/how-to-create-a-sliding-drawer-component-for-ionic-2/