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; 
    } 
}