Angular animations for your FAB button

If you prefer Angular animations to animate your FAB button group (over keyframes or the animation library), try this!

  •         
      @BaseComponent({
      moduleId: module.id,
      selector: 'sd-home',
      templateUrl: 'home.component.html',
      styleUrls: ['home.css'],
      animations: [
            trigger('state', [
                state('active', style({ transform: 'rotate(45)' })),
                state('inactive', style({ transform: 'rotate(0)' })),
                transition('inactivebtn => activebtna', [
                    animate('280ms ease-in', keyframes([
                        style({opacity: 1, transform: 'translateY(0)'}),
                        style({opacity: 1, transform: 'translateX(70)'})                
                    ]))
                ]),
                transition('inactivebtn => activebtnb', [
                     animate('280ms ease-in', keyframes([
                        style({opacity: 1, transform: 'translateX(0)'}),
                        style({opacity: 1, transform: 'translateY(-80)'})
                    ]))
                ]),
                transition('inactivebtn => activebtnc', [
                     animate('280ms ease-in', keyframes([
                        style({opacity: 1, transform: 'translateY(0)'}),
                        style({opacity: 1, transform: 'translateX(-70)'}),
                        
                    ]))
                ]),
                transition('activebtna => inactivebtn', [
                   animate('280ms ease-out', keyframes([
                        style({opacity: 0, transform: 'translateX(0)'}),
                        style({opacity: 0, transform: 'translateY(0)'})
                    ]))
                ]),
                transition('activebtnb => inactivebtn', [
                     animate('280ms ease-out', keyframes([
                        style({opacity: 0, transform: 'translateX(0)'}),
                        style({opacity: 0, transform: 'translateY(0)'})
                    ]))
                ]),
                transition('activebtnc => inactivebtn', [
                     animate('280ms ease-out', keyframes([
                        style({opacity: 0, transform: 'translateX(0)'}),
                        style({opacity: 0, transform: 'translateY(0)'})
                    ]))
                ])
            ]) 
        ]  
    })
    

  •         
      /*FAB button*/
    
    .fa {
      font-family: FontAwesome, fontawesome-webfont;
      font-size:20;
    }
    .speed-button {
        height: 50;
        width: 50;
        font-size: 20;
        text-align: center;
        color: #fff;
        border-radius: 25;
        horizontal-align: center;
        vertical-align: bottom;
    }
    .btnb {
      background-color: #6DE9C0; 
    }
    .btna {
      background-color: #F2B208; 
    }
    .btne {
      background-color: #F13030; 
    }
    .fab-button {
        height: 70;
        width: 70;
        margin: 10;
        background-color: #088FFC;
        horizontal-align: center;
        vertical-align: bottom;
    }
    .action-btn{
      background-color: #1598F6;    
      margin-top: 5;
      border-radius:2;
    }
    

  •         
      <Button row="1" #btna (tap)="addStudent()" [@state]=" isOpen ? 'activebtna' : 'inactivebtn' " [text]="'fa-plus' | fonticon" class="speed-button btna fa"></Button>
          <Button row="1" #btnd (tap)="goToTeachersHome()" [@state]=" isOpen ? 'activebtnb' : 'inactivebtn' " [text]="'fa-mortar-board' | fonticon" class="speed-button btnb fa"></Button>
          <Button row="1" #btne (tap)="logout()" [@state]=" isOpen ? 'activebtnc' : 'inactivebtn' " [text]="'fa-sign-out' | fonticon" class="speed-button btne fa"></Button>
         
          <Fab row="1" #fab [@state]=" isOpen ? 'active' : 'inactive' " (tap)="onTap()" icon="./images/menu.png" rippleColor="#f1f1f1" class="fab-button"></Fab>