聚合物霓虹燈動畫不起作用

Question

我正在嘗試通過使用聚合物在對話框上實現霓虹燈動畫。 動畫不起作用。 可以看到彈出窗口，但是沒有任何動畫效果。

我的代碼如下：

<html>
  <head>
    <link rel="import" href="/bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html" />
    <link rel="import" href="/bower_components/paper-dialog/paper-dialog.html" />
    <link rel="import" href="/bower_components/paper-button/paper-button.html" />
    <link rel="import" href="/bower_components/paper-item/paper-item.html" />
    <link rel="import" href="/bower_components/paper-item/paper-item-body.html" />
    <link rel="import" href="/bower_components/iron-icon/iron-icon.html" />
    <link rel="import" href="/bower_components/neon-animation/animations/scale-up-animation.html"/>
    <link rel="import" href="/bower_components/neon-animation/animations/fade-out-animation.html"/>
    <link rel="import" href="/bower_components/neon-animation/neon-animation-runner-behavior.html"/>
    <link rel="import" href="/bower_components/neon-animation/neon-animations.html"/>

    <script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="import" href="/bower_components/paper-styles/paper-styles.html"/>
  </head>
  <body>
    <section is="my-dialog" onclick="clickHandler(event)">
      <paper-button data-dialog="animated" role="button">raised button</paper-button>
      <paper-dialog id="animated" role="dialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
        <h2>Header</h2>
        <paper-dialog-scrollable>
          Loremipsum... gfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhfgggggggggggggg
        </paper-dialog-scrollable>
        <div class="buttons">
          <paper-button dialog-dismiss>Cancel</paper-button>
          <paper-button dialog-confirm>Accept</paper-button>
        </div>
      </paper-dialog>
    </section>
    <script>
      function clickHandler(e) {
        var button = e.target;
        while (!button.hasAttribute('data-dialog') && button !== document.body) {
          button = button.parentElement;
        }

        if (!button.hasAttribute('data-dialog')) {
          return;
        }

        var id = button.getAttribute('data-dialog');
        var dialog = document.getElementById(id);
        if (dialog) {
          dialog.open();
          }
        }
      </script>
    </body>
</html>

請告訴我我做錯了什么？

謝謝。

Answer 1

我剛試過您的代碼，它可以工作。 我使用Yeoman生成器創建了Polymer應用程序，添加了4個必需的導入，並用您的代碼替換了index.html頁面。

所需的4種進口是：

紙button.html
紙dialog.html
紙對話框的scrollable.html
霓虹燈animation.html

您導入的其他文件不是必需的。 我只能建議檢查導入路徑。

Answer 2

如果您使用的是Yeoman腳手架，並且是從index.html文件導入的，那么您將需要為導入添加路徑，該路徑將從index.html移到一個目錄，然后到bower_components目錄。

這樣做的方法是在路徑名的開頭添加兩個點和一個斜杠。 即../

例：

完整的導入標簽應如下所示：（ 請參見兩個點？）

<link rel="import" href="../bower_components/neon-animation/neon-animations.html"/>

並為您的所有進口商品做到這一點。

聚合物霓虹燈動畫不起作用

問題描述

2 個解決方案

解決方案1
1 2015-07-10 21:08:06

解決方案2
0 2015-07-22 23:07:56

聚合物霓虹燈動畫不起作用

問題描述

2 個解決方案

解決方案1 1 2015-07-10 21:08:06

解決方案2 0 2015-07-22 23:07:56

解決方案1
1 2015-07-10 21:08:06

解決方案2
0 2015-07-22 23:07:56