聚合物纸波纹

当按下按钮时，我试图改变元素的颜色。 我想要在按下按钮并且颜色改变时在该元素中触发纸张波纹效果。

我该怎么做？

目标要素：

  
Heading
  

触发元素：

使用Javascript：

 $(".def").click(function(){ $(".abc").css("background-color", $(this).css("background-color")); }); 

Answer 1

除了直接在paper-toolbar上操作样式之外，更多的元素方法是在paper-toolbar旁边添加paper-ripple元素，并在paper-button上调用mousedown / mouseup时手动调用downAction / upAction 。

    
Heading
   
 Go blue Go red 
  

请注意， paper-ripple的背景颜色是color 。

 _assignColor: function(e) { var button = Polymer.dom(e).localTarget; var ripple = this.$.ripple; $(ripple).css("color", $(button).css("background-color")); // or without jQuery //var buttonStyle = getComputedStyle(button, null); //ripple.style.color = buttonStyle.backgroundColor; }, _onMousedown: function (e) { this._assignColor(e); this.$.ripple.downAction({x: ex, y: ey}); }, _onMouseup: function (e) { this._assignColor(e); this.$.ripple.upAction(); } 

看看这个plunker 。

Answer 2

我不完全确定你在这里要做什么，但是Polymer会为你完成大部分繁重的工作。 如果您只想设置涟漪效果的颜色，则文档建议使用选择器：

 #my-button::shadow paper-ripple { color: blue; } 

如果您想更永久地更改按钮的颜色，像toggles属性可能会有所帮助。 （Google的演示在这里 ）

HTML：

 button text 

CSS：

 #my-button[active] { background-color: red; } 

虽然如果你想保持它的颜色，你必须设置按钮以忽略进一步的点击事件，以便它保持其active属性。