隐藏和显示操作的 FAB Button 动画答案

【问题标题】：FAB Button animation for hiding and showing operation隐藏和显示操作的 FAB Button 动画
【发布时间】：2017-09-12 19:17:18
【问题描述】：

我在 Angular2 中创建了一组 FAB 按钮。我想添加动画，以便它们一个接一个地显示以进行隐藏和显示操作。我该如何处理动画，谁能在动画中帮助我。

 <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" [ngClass]="{'fabActionsHide':!FabToggle,'fabActionsShow':FabToggle}">
                                <button md-mini-fab class="md-fab md-raised md-primary" (click)='reloadApi()'>
                                    <md-icon svgIcon="refresh"></md-icon>
                                </button>
                                <button [disabled]="!this.isPermission" md-mini-fab class="md-fab md-raised md-primary" (click)='generatePDF()'>
                                    <md-icon svgIcon="pdf"></md-icon>
                                </button>
                                <button [disabled]="!this.isPermission" md-mini-fab class="md-fab md-raised md-primary" (click)='generateCSV()'>
                                    <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">
                                    <md-icon style="color:white;">add</md-icon>
                                </button>

【问题讨论】：

标签： css typescript angular2-template

【解决方案1】：

我在寻找您的答案时得到了这个。由于我无法对您的问题发表评论，因此请将其发布在答案部分。

（仅限点击的 FAB）部分

Check this

【讨论】：