纸波纹超出元素

Question

聚合物 1.1

我正在使用 paper-ripple，效果很好。但是，纹波会超出元件的范围。在所有示例中，这都不会发生。我真的很想将涟漪效应保留在元素内部而不是外部。

<dom-module id="portfolio-display">
  <style>
    :host {
      @apply(--layout-horizontal);
      @apply(--layout-center-justified);
      height: 40%;
     }

    section {
      width: 100%;
      transition: box-shadow 0.1s ease-out; 
      background-color: #5a7785;
    }

    section:hover {
      box-shadow: 0px 0px 30px 0 rgba(0,0,0,0.2), 0 10px 10px 0 rgba(0,0,0,0.24);
      cursor: pointer;
    }

    @media all and (min-width: 1200px) {
      section {
        width: 90%;
      }
    }

    iron-icon[icon="build"] {
      color: rgba(255, 87, 34, 1);
    }

    .big { 
      --iron-icon-height: 200px;
      --iron-icon-width: 200px;
    }
  </style>

  <template>
    <section>
      <div onclick="page('/portfolio')"
        class="vertical layout">
        <div>
          <div>
            <h2 class="section-title">Portfolio</h2>
            <p class="section-description">blah blah blah</p>
          </div>
          <div class="layout horizontal center-center">
            <iron-icon class="big" icon="build"></iron-icon>
          </div>
        </div>
      </div>
      <paper-ripple></paper-ripple>
    </section>
  </template>

  <script>
    Polymer({
      is: "portfolio-display"
    });
  </script>
</dom-module>

Answer 1

尝试给你的 section 一个 relative 位置，因为 paper-ripple 的位置默认设置为 absolute。

<section class="relative">

纸波纹超出元素

paper-ripple goes outside the element

polymer

polymer-1.0