聚合物霓虹動畫不起作用

我想通過使用聚合物在對話框上實現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>

請告訴我，我做錯了嗎？

謝謝。

來源

2015-07-10 Rushabh Ganatra

我只是試過你的代碼，它的工作原理。我使用Yeoman生成器創建了一個Polymer應用程序，添加了4個必需的導入項，並用您的代碼替換了index.html頁。

4個所需進口：

紙button.html
紙dialog.html
紙對話框的scrollable.html
氖animation.html

您不需要輸入其他人。我只能建議檢查進口路徑。

來源

2015-07-10 21:08:06 Mason

如果您使用的是約曼腳手架和您從index.html文件導入，那麼你就需要一個路徑添加到您的進口從您的index.html上升一個目錄，然後到bower_components目錄。

要做到這一點的方法是將兩個點和一個斜槓添加到路徑名的開頭。即，../

例子：

完整的進口標籤應該是這樣的：（？看到這兩個點）

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

而做到這一點對所有的進口。

來源

2015-07-22 23:07:56 Mowzer

聚合物霓虹動畫不起作用

回答

相關問題