我有Angular2 Material Fab Speed Dial,我需要以链接
Angular1 link中的格式为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,1);
-moz-transition: all 0.1ms cubic-bezier(0,1);
-o-transition: all 0.1ms cubic-bezier(0,1);
-ms-transition: all 0.1ms cubic-bezier(0,1);
}
.fabActionsHide {
opacity: 0;
transition: all 2.0s cubic-bezier(0,1);
-webkit-transition: all 1.2s cubic-bezier(0,1);
-moz-transition: all 1.2s cubic-bezier(0,1);
-o-transition: all 1.2s cubic-bezier(0,1);
-ms-transition: all 1.2s cubic-bezier(0,1);
}
解决方法
将此添加到#右侧按钮的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.25,1);
transform: translate3d(0px,-30px,0px);
}
.fabActionsHide #menu2 {
animation-timing-function: cubic-bezier(0.25,0.1,-60px,0px);
}
.fabActionsHide #menu3 {
animation-timing-function: cubic-bezier(0.42,1,-120px,0px);
}
.fabActionsHide #menu4 {
animation-timing-function: cubic-bezier(0,0.58,-180px,0px);
}
