How to change Angular2 Bulk animation of a dynamic set of material, as in angular1

Question

I have an Angular2 Material Fab Speed ​​Dial, I need to make an animation for this Angular2 in this format, as in the Angular1 link . This is part of the Angular1 animation. Please suggest me do the same in Angular2.

In the link above, I need my code to work as an example of md-scale.

I am here sharing Angular2 HTML code:

<div id="right-side" class="col-lg-1 col-md-1 col-sm-1 col-xs-1" layout="column"> <button md-mini-fab class="md-fab md-raised md-primary" aria-label="New Task" (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)='reload()'> <md-icon svgIcon="refresh"></md-icon> </button> <button md-mini-fab class="md-fab md-raised md-primary" (click)='DF()'> <md-icon svgIcon="pdf"></md-icon> </button> <button md-mini-fab class="md-fab md-raised md-primary" (click)='SV()'> <md-icon svgIcon="csv"></md-icon> </button> <button md-mini-fab class="md-fab md-raised md-primary (click)="addModal.show()"> <md-icon style="color:white;">add</md-icon> </button> </div> </div> 

CSS

 .fab-actions button { margin-top: 8px; } #right-side button { background-color: #00bcd4 !important; height: 55px; width: 55px; font-size: 32px; } #right-side button:hover, #right-side button:focus { background-color: #000 !important; } .fab-actions button md-icon { height: 40px; width: 40px; } .fabActionsShow { opacity: 1; transition: all 0.1ms cubic-bezier(0, 0.5, 0.75, 1); -webkit-transition: all 0.1ms cubic-bezier(0, 0.5, 0.75, 1); -moz-transition: all 0.1ms cubic-bezier(0, 0.5, 0.75, 1); -o-transition: all 0.1ms cubic-bezier(0, 0.5, 0.75, 1); -ms-transition: all 0.1ms cubic-bezier(0, 0.5, 0.75, 1); } .fabActionsHide { opacity: 0; transition: all 2.0s cubic-bezier(0, 0.5, 0.75, 1); -webkit-transition: all 1.2s cubic-bezier(0, 0.5, 0.75, 1); -moz-transition: all 1.2s cubic-bezier(0, 0.5, 0.75, 1); -o-transition: all 1.2s cubic-bezier(0, 0.5, 0.75, 1); -ms-transition: all 1.2s cubic-bezier(0, 0.5, 0.75, 1); } 

Answer 1

add this to CSS file for # right button

 #right-side button { background-color: #00bcd4 !important; height: 55px; width: 55px; font-size: 32px; transition: transform ease-out 0.5s; transition-duration: 0.5s; 

}

in HTML, define the id for your FAB buttons, which I defined as menu1, menu2, menu3, menu4, and then add them to CSS

  .fabActionsHide #menu1 { animation-timing-function: cubic-bezier(0, 0, 0.25, 1); transform: translate3d(0px, -30px, 0px); } .fabActionsHide #menu2 { animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); transform: translate3d(0px, -60px, 0px); } .fabActionsHide #menu3 { animation-timing-function: cubic-bezier(0.42, 0, 1, 1); transform: translate3d(0px, -120px, 0px); } .fabActionsHide #menu4 { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); transform: translate3d(0px, -180px, 0px); }