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

发布时间：2020-12-17 18:10:31 所属栏目：安全来源：网络整理

导读：我有Angular2 Material Fab Speed Dial,我需要以链接 Angular1 link中的格式为Angular2做动画.这是Angular1动画部分.请建议我在Angular2中以同样的方式. 在上面的链接中,我需要我的代码像md-scale示例一样工作. 我在这里通过共享HTML代码Angular2： div id="

我有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);
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!