Polymer paper ripple

问题

I am trying to change the color of an element when a button is pressed. I want a paper ripple effect to be triggered in that element when the button is pressed and the color changes.

How am I supposed to do that?

Target element:

<paper-toolbar class="abc">
    <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
    <div flex class="indent title">Heading</div>
</paper-toolbar>                

Trigger element:

<paper-button class="def background-blue"></paper-button>
<paper-button class="def background-red"></paper-button>

Javascript:

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

回答1:

Instead of manipulating styles directly on the paper-toolbar, a more element approach is to add a paper-ripple element next to your paper-toolbar and manually call downAction/upAction when mousedown/mouseup is invoked on your paper-buttons.

<paper-header-panel class="fit">
    <paper-toolbar class="toolbar">
        <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
        <div flex class="indent title">Heading</div>

        <paper-ripple id="ripple" center></paper-ripple>
    </paper-toolbar> 

    <div>
        <paper-button class="def background-blue"raised on-mousedown="_onMousedown" on-mouseup="_onMouseup">Go blue</paper-button>
        <paper-button class="def background-red" raised on-mousedown="_onMousedown" on-mouseup="_onMouseup">Go red</paper-button>
    </div>
</paper-header-panel>

Note that the background color of paper-ripple is 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: e.x, y: e.y});
 },

 _onMouseup: function (e) {
     this._assignColor(e);

     this.$.ripple.upAction();
 }   

Have a look at this plunker.

回答2:

I'm not entirely sure what you're trying to do here, but Polymer takes care of most of the heavy lifting for you. If you just want to style the color of the ripple effect, the docs suggest using the selector:

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

If you want to more permanently change the color of the button, something like the toggles attribute might help. (Google's demo is here)

html:

<paper-button toggles>button text</paper-button>

css:

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

although if you'd want to keep it that color you'd have to set up the button to ignore further click events so it kept its active attribute.

来源：https://stackoverflow.com/questions/32668506/polymer-paper-ripple