Question

我复制了来自here＆amp;的卡动画代码。我想在dom模块中使用该卡片动画，导致警告ripple-animation: fromPage is undefined!＆amp;动画不适用于霓虹灯动画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

用霓虹灯更新解决了

涟漪动画：fromPage未定义！霓虹灯动画1.1.1 +

1 个答案: