javascript - 涟漪动画 : fromPage is undefined! 与霓虹动画 1.1.1+

Question

我从 here 复制了卡片动画代码& 我想在 dom 模块中使用该卡片动画，这会导致警告 ripple-animation: fromPage is undefined!和动画不适用于霓虹动画 1.1.1+

<dom-module id="user-check">
  <template>
    <neon-animated-pages attr-for-selected="data-page" class="fit" selected="[[selected]]">
      <card-main data-page="card-main" id="card_main">
        <div class="horizontal justified layout">
          <paper-button class="blue flex" on-click="_on_sign_in">sign in</paper-button>
          <paper-button class="flex teal" on-click="_on_sign_up">sign up</paper-button>
        </div>
      </card-main>

      <card-child data-page="A" id="A">
        <div>sign in page</div>
      </card-child>

      <card-child data-page="Z" id="Z">
        <div>sign up page</div>
      </card-child>
    </neon-animated-pages>
  </template>
</dom-module>

<script>
(function() {
  Polymer({
    is: "user-check",
    properties: {
      selected: {
        type: String,
        value: "card-main"
      }
    },
    _on_sign_in: function(e) {
      console.log("sign_in");
      this.$.card_main.sharedElements = {
        'reverse-ripple': e.target,
        ripple: e.target
      };
      this.selected = "A";
    },
    _on_sign_up: function(e) {
      console.log("sign_up");
      this.$.card_main.sharedElements = {
        'reverse-ripple': e.target,
        ripple: e.target
      };
      this.selected = "Z";
    }
  });
})();
</script>

它在 neon-animation-1.1.0 中完美运行

repo , demo

Answer 1

通过霓虹动画更新解决