我正在尝试实现 neon-animation使用 polymer 在对话框上。动画不起作用。可以看到弹出窗口，但没有任何动画效果。
我的代码如下:
<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>
请告诉我我做错了什么？
谢谢。
最佳答案
我刚刚尝试了你的代码，它有效。我使用 Yeoman 创建了一个 polymer 应用程序生成器，添加了 4 个必需的导入，并用您的代码替换了 index.html 页面。
所需的 4 个导入是:
- paper-button.html
- paper-dialog.html
- paper-dialog-scrollable.html
- neon-animation.html
您导入的其他内容不是必需的。我只能建议检查导入路径。
关于javascript - polymer NEON 动画不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31347362/