FAB 按钮动画的过渡时间更长，并且无法按预期工作答案

【问题标题】：Transition time is more with FAB button animation and not working as expectedFAB 按钮动画的过渡时间更长，并且无法按预期工作
【发布时间】：2017-12-15 07:10:24
【问题描述】：

我有 FAB 按钮和 3 个图标。点击 show 和 hide 时效果很好。但是过渡太迟了，我希望图标一步一步来。我也改变了过渡延迟。但它不起作用。

<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" [disabled]="!this.isPermission" (click)='FabToggle = !FabToggle'>
        <md-icon style="color:white;">menu</md-icon>
 </button>


    <div class="fab-actions md-scale"  [ngClass]="{'fabActionsHide':!FabToggle,'fabActionsShow':FabToggle}">

    <button md-mini-fab class="md-fab md-raised md-primary" (click)='reloadApi()' style="transition-delay: 2s; opacity: 1; transform: scale(1);" >
                <md-icon svgIcon="refresh"></md-icon>
                           </button>

    <button [disabled]="!this.isPermission" md-mini-fab class="md-fab md-raised md-primary" (click)='generatePDF()'
            style="transition-delay: 3s; opacity: 1; transform: scale(1);">
                               <md-icon svgIcon="pdf"></md-icon>
                           </button>

    <button [disabled]="!this.isPermission" md-mini-fab class="md-fab md-raised md-primary" (click)='generateCSV()'
    style="transition-delay: 4s; opacity: 1; transform: scale(1);">
                               <md-icon svgIcon="csv"></md-icon>
                           </button>

    <button [disabled]="!this.isPermission || !checkin_entries" md-mini-fab class="md-fab md-raised md-primary" 
                        (click)="addModal.show();FabToggle = !FabToggle" style="transition-delay: 5s; opacity: 1; transform: scale(1);">
                               <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);
}

【问题讨论】：

你能分享一下plunker吗？

标签： html css angular animation floating-action-button

【解决方案1】：

请在您的 CSS 中添加这些可能会起作用：

 .fabActionsHide #menu1 {
    animation-timing-function: cubic-bezier(0,0,0.25,1); 
    transform: translate3d(0px, -30px, 0px);
}

在您的 HTML 部分：试试这个：

<button md-mini-fab class="md-fab md-raised md-primary" (click)='reloadApi()' id= menu1 >
<md-icon svgIcon="refresh"></md-icon>
</button>

【讨论】：