聚合物霓虹灯动画不起作用
聚合物霓虹灯动画不起作用
提问于 2015-07-10 17:59:50
我试图通过使用聚合物在对话中实现霓虹灯动画。动画不起作用。可以看到弹出窗口，但没有任何动画效果。
我的代码如下：
<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>请告诉我我做错了什么？
谢谢。
回答 2
Stack Overflow用户
发布于 2015-07-10 21:08:06
我刚试过你的密码就行了。我用约曼生成器创建了一个聚合物应用程序，添加了4个必需的导入，并用代码替换了index.html页面。
4项所需进口是：
- paper-button.html
- paper-dialog.html
- paper-dialog-scrollable.html
- neon-animation.html
您进口的其他产品不需要。我只能建议检查导入路径。
Stack Overflow用户
发布于 2015-07-22 23:07:56
如果您使用的是约曼脚手架，并且是从您的index.html文件导入的，那么您需要为您的导入添加一个路径，该路径从您的index.html上升到一个目录，然后转到bower_components目录。
这样做的方法是在路径名的开头添加两个点和一个斜线。即，../
示例：
完整的导入标记应该如下所示：(看到这两个点了吗？)
<link rel="import" href="../bower_components/neon-animation/neon-animations.html"/>
对你所有的进口品都这么做。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31347362
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号