定制 animation angular 材料標簽

Question

我有一個問題我正在使用 Angular 材料選項卡（ https://material.angular.io/components/tabs ）

默認情況下，我有幾個效果，改變內容的“幻燈片”效果和選項卡后面的黑色效果。我能夠刪除“幻燈片”效果，但我不知道如何修改/刪除黑色效果？ ??

黑色效果 1

黑色效果 2

有人可以幫助我嗎？

我的 html：

<mat-tab-group class="navBar" [@.disabled]="true">
<mat-tab label="all">
    <ng-template mat-tab-label>
        <div (mouseover)="iconAllOn=true" (mouseout)="iconAllOn=false">
            <img class="logoNavBar" *ngIf="!iconAllOn" [src]="cheminImageAllOff">
            <img class="logoNavBar" *ngIf="iconAllOn"[src]="cheminImageAllOn">
        </div>
    </ng-template> 
    Content 1
</mat-tab>

Answer 1

這種黑色效果就是材質波紋效果。

通過向您的結構添加一個新的 div 來實現效果：

您可以通過使用 CSS 定位元素或使用MatTabNav組件的disableRipple輸入參數（查看此處）或MatTabGroup （此處）來刪除它