Question

聚合物1.1

我有一个div并且在点击时我想要按下时产生彩色涟漪效果（有点像paper-tab效果）。

我正在使用ripple-animation但我收到错误ripple-animation: sharedElement with id undefined not found in <portfolio-display class="x-scope portfolio-display-0" style="opacity: 0;">…</portfolio-display>`

根据文档，我以太应该放this或gesture。我不确定sharedElement是什么或我应该放什么。有人知道吗？

 <template>
    <section>
      <div on-click="buttonPressed"
        class="vertical layout">
        <div>
          <div>
            <h2 class="section-title">Portfolio</h2>
            <p class="section-description">Blah<br>Blah</p>
          </div>
          <div class="layout horizontal center-center">
             <iron-icon class="big" icon="http"></iron-icon>
          </div>
        </div>
      </div>
    </section>
  </template>

  <script>
    Polymer({
      is: "portfolio-display",
      behaviors: [
        Polymer.NeonSharedElementAnimatableBehavior,
        Polymer.NeonAnimationRunnerBehavior
      ],
      properties: {
        animationConfig: {
          value: function() {
            return {
              'pressAnimation': [{
                name: 'opaque-animation',
                node: this
              }, {
                name: 'fade-out-animation',
                node: this,
                timing: {
                  duration: 0
                }
              }, {
                name: 'ripple-animation',
                id: this,
                toPage: this,
                fromPage: this
              }]
            }
          }
        }
      },
      buttonPressed: function() {
        console.log('sssss');
        this.playAnimation('pressAnimation');
      }
    });
  </script>
</dom-module>

Answer 1

无需出现此类并发症，您应该使用paper-ripple甚至paper-button。

仅供您参考，您尝试使用的涟漪动画是用于通过霓虹动画页面组件实现页面之间的过渡效果，并且没有其他用途。

div上的聚合物波纹动画用于点击 - sharedElement错误

1 个答案: