单击 div 上的聚合物波纹动画 - sharedElement 错误

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 or even paper-button。

仅供参考，您尝试使用的波纹动画旨在通过 neon-animated-pages 组件在页面之间实现过渡效果，没有其他目的。

单击 div 上的聚合物波纹动画 - sharedElement 错误

Polymer Ripple Animation on div for on-click - sharedElement Error

polymer

polymer-1.0