paper-fab卡在動畫中點擊

Question

我正在嘗試在點擊事件上切換<paper-fab>的圖標。但正如你所看到的，<paper-fab>的顏色因其動畫卡住而改變。我開始嘗試使用requestAnimationFrame。

代碼：

this.$.editFab.icon = "save"; 

requestAnimationFrame(() => { 
        this.$.editFab.icon = "save"; 
       }); 

Answer 1

我找到了解決辦法！當紙廠集中時由css規則引起的顏色變化。 我剛添加到我的CSS這樣的：

paper-fab:focus{ 
    background: my-color; 
} 

Answer 2

您應該使用的<paper-fab>與--paper-fab-keyboard-focus-background自定義屬性，即

paper-fab { 
    --paper-fab-keyboard-focus-background: { 
     color: --accent-color; 
    } 
}