Angular2 Malzeme fab hızlı çevirme animasyonu angular1 olarak nasıl değiştirilir

Question

Angular2 Materyali Fab Hızlı Çevirme var, bu formattaki Angular2 için Angular1 link numaralı bağlantıdaki gibi animasyon yapmam gerekiyor. Bu Angular1 animasyon parçası. Lütfen Angular2'de aynı şekilde yapmamı öner.

Yukarıdaki bağlantıda, kodumu md-scale Örnek olarak çalışmak için kullanmam gerekiyor.

HTML kodu Angular2 paylaşarak buradayım:

<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

# sağ taraftaki düğme için CSS dosyasındaki bu eklentiyi

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

}

HTML

Ben menu1, menu2, menu3, menu4 olarak tanımladığınız sizin FAB düğmeler için id tanımlamak ve sonra ya ben paylaşmak wil 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); 
}