NativeScript Snacks

        
.speed-button {
    height: 50;
    width: 50;
    font-size: 20;
    text-align: center;
    color: #fff;
    opacity: 0;
    border-radius: 25;
    horizontal-align: center;
    vertical-align: bottom;
}
.btna {
  background-color: #493DF8; 
}
.btnb {
  background-color: #1598F6; 
}
.btnc {
  background-color: #6DE9C0; 
}
.btnd {
  background-color: #F2B208; 
}
.btne {
  background-color: #F13030; 
}
.fab-button {
    height: 70;
    width: 70;
    margin: 10;
    background-color: #088FFC;
    horizontal-align: center;
    vertical-align: bottom;
}
		
      

        
<StackLayout>
 
   <GridLayout rows="80,*,auto">
     
     <CardView margin="5" class="cardStyle">
        <Label text="Welcome, Practice Buddy and Teachers!"></Label>
     </CardView>
      
      <Button row="1" #btna (tap)="toggleNav('Settings')" [text]="'fa-cog' | fonticon" class="speed-button btna fa fa-cog"></Button>
      <Button row="1" #btnb (tap)="toggleNav('Practice')" [text]="'fa-music' | fonticon" class="speed-button btnb fa"></Button>
      <Button row="1" #btnc (tap)="toggleNav('Calendar')" [text]="'fa-calendar' | fonticon" text="three" class="speed-button btnc fa"></Button>
      <Button row="1" #btnd (tap)="toggleNav('Feedback')" [text]="'fa-comments' | fonticon" text="four" class="speed-button btnd fa"></Button>
      <Button row="1" #btne (tap)="toggleNav('Teachers')" [text]="'fa-dashboard' | fonticon" text="five" class="speed-button btne fa"></Button>
     
      <Fab row="1" #fab (tap)="toggleNav('Home')" icon="./images/icAddWhite.png" rippleColor="#f1f1f1" class="fab-button"></Fab>
    
    </GridLayout> 
 
 </StackLayout>
      
		
      

        
public _isFabOpen: boolean;
    
    @ViewChild("btna") btna: ElementRef;
    @ViewChild("btnb") btnb: ElementRef;
    @ViewChild("btnc") btnc: ElementRef;
    @ViewChild("btnd") btnd: ElementRef;
    @ViewChild("btne") btne: ElementRef;
    @ViewChild("fab") fab: ElementRef;
  
   toggleNav(id){
        
      if (this._isFabOpen === true) {
            let animations = [
                  { target: this.fab.nativeElement, rotate: 0, duration: 280, delay: 0 },
                  { target: this.btna.nativeElement, translate: { x: 0, y: 0 }, opacity: 0, duration: 280, curve: AnimationCurve.easeOut, delay: 0 },
                  { target: this.btnb.nativeElement, translate: { x: 0, y: 0 }, opacity: 0, duration: 280, curve: AnimationCurve.easeOut, delay: 0 },
                  { target: this.btnc.nativeElement, translate: { x: 0, y: 0 }, opacity: 0, duration: 280, curve: AnimationCurve.easeOut, delay: 0 },
                  { target: this.btnd.nativeElement, translate: { x: 0, y: 0 }, opacity: 0, duration: 280, curve: AnimationCurve.easeOut, delay: 0 },
                  { target: this.btne.nativeElement, translate: { x: 0, y: 0 }, opacity: 0, duration: 280, curve: AnimationCurve.easeOut, delay: 0 }
        ];

              var a = new Animation(animations);

              a.play()
                  .then(() => {
                      if(id !== "Home"){
                        this._router.navigate([id])
                      }
                      this._isFabOpen = false;
                  })
                  .catch(function (e) {
                      console.log(e.message);
                  });
        }
        else {
          let animations = [
                  { target: this.fab.nativeElement, rotate: 45, duration: 280, delay: 0 },
                  { target: this.btna.nativeElement, translate: { x: -90, y: -15 }, opacity: 1, duration: 280, curve: AnimationCurve.easeOut, delay: 0 },
                  { target: this.btnb.nativeElement, translate: { x: -75, y: -80 }, opacity: 1, duration: 280, curve: AnimationCurve.easeOut, delay: 0 },
                  { target: this.btnc.nativeElement, translate: { x: 0, y: -105 }, opacity: 1, duration: 280, curve: AnimationCurve.easeOut, delay: 0 },
                  { target: this.btnd.nativeElement, translate: { x: 75, y: -80 }, opacity: 1, duration: 280, curve: AnimationCurve.easeOut, delay: 0 },
                  { target: this.btne.nativeElement, translate: { x: 90, y: -15 }, opacity: 1, duration: 280, curve: AnimationCurve.easeOut, delay: 0 }
              ];

              let a = new Animation(animations);

              a.play()
                  .then(() => {
                      this._isFabOpen = true;
                  })
                  .catch(function (e) {
                      console.log(e.message);
                  });
        }
    }      
		</code>
      </pre>
    </div>
  </li>
    
</ul>