Question

我正在尝试使用聚合物在对话框上实现neon-animation。动画不起作用。可以看到弹出窗口，但没有任何动画效果。

我的代码如下：

<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的一个目录到{ {1}}目录。

这样做的方法是在路径名的开头添加两个点和斜杠。即，../

示例：

完整的导入标记应如下所示：（请参阅两个点？）

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

为你的所有进口做到这一点。

聚合物霓虹动画不起作用

2 个答案: