如何在angular1中更改Angular2 Material fab快速拨号动画

Question

我有Angular2 Material Fab Speed Dial,我需要以链接Angular1链接的格式为Angular2做动画.这是Angular1动画的一部分.请建议我在Angular2中以同样的方式.

在上面的链接中,我需要我的代码像md-scale示例一样工作.

我在这里通过共享HTML代码Angular2:

<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

将其添加到 #right-side 按钮的 CSS 文件中

#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 中为 FAB 按钮定义 id，我将其定义为 menu1、menu2、menu3、menu4，然后将它们添加到 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);
}