I am working with Angular2 to create a series of FAB Buttons. I would like to incorporate animations so that they are displayed in sequence for the hide and show actions. Can anyone provide guidance on how to achieve this using animations?
<button md-mini-fab class="md-fab md-raised md-primary" aria-label="New Task" [disabled]="!this.isPermission" (click)='FabToggle = !FabToggle'>
<md-icon style="color:white;">menu</md-icon>
</button>
<div class="fab-actions" [ngClass]="{'fabActionsHide':!FabToggle,'fabActionsShow':FabToggle}">
<button md-mini-fab class="md-fab md-raised md-primary" (click)='reloadApi()'>
<md-icon svgIcon="refresh"></md-icon>
</button>
<button [disabled]="!this.isPermission" md-mini-fab class="md-fab md-raised md-primary" (click)='generatePDF()'>
<md-icon svgIcon="pdf"></md-icon>
</button>
<button [disabled]="!this.isPermission" md-mini-fab class="md-fab md-raised md-primary" (click)='generateCSV()'>
<md-icon svgIcon="csv"></md-icon>
</button>
<button [disabled]="!this.isPermission || !checkin_entries" md-mini-fab class="md-fab md-raised md-primary" (click)="addModal.show();FabToggle = !FabToggle">
<md-icon style="color:white;">add</md-icon>
</button>