聚合物3.0未被引用的参考错误在纸张下拉单击 [英] polymer 3.0 uncaught reference error on paper drop-down click

问题描述

导入后：

import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
import '@polymer/paper-listbox/paper-listbox.js';
import '@polymer/paper-item/paper-item.js';

下单时不会产生错误，但点击时会产生
（将重复多次点击）它会产生它。

The dropdown does not produce an error when left alone but when clicked on (will repeat on multiple clicks) it will produce it.

Uncaught ReferenceError: KeyframeEffect is not defined
    at HTMLElement.configure (fade-in-animation.js:32)
    at HTMLElement._configureAnimations (neon-animation-runner-behavior.js:42)
    at HTMLElement.playAnimation (neon-animation-runner-behavior.js:122)
    at HTMLElement._renderOpened (iron-dropdown.js:200)
    at HTMLElement.__openedChanged (iron-overlay-behavior.js:608)
    at HTMLElement.nextAnimationFrame (iron-overlay-behavior.js:634)

这是我试图开始工作的代码：

Here is the code I am trying to get working:

<paper-dropdown-menu label="Dinosaurs">
  <paper-listbox slot="dropdown-content" selected="1">
    <paper-item>allosaurus</paper-item>
    <paper-item>brontosaurus</paper-item>
    <paper-item>carcharodontosaurus</paper-item>
    <paper-item>diplodocus</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

我尝试导入neon-animations.js，neon-animation.js和neon-animated-behavior .js文件。
从其他问题看类似的问题，他们的解决方案是将web动画导入到他们的html文件中，但是我的代码在js文件中，因此不起作用。

I have tried importing neon-animations.js, neon-animation.js and neon-animated-behavior.js. Looking at similar issues from other questions their solutions are to import web-animations into their html file but my code is in a js file so that would not work.

作为注释我没有使用凉亭或流星。

as a note I am not using bower or meteor.

推荐答案

Web Animations polyfill 解决了您所看到的错误。从 npm 安装：

The Web Animations polyfill resolves the error you're seeing. Install it from npm:

npm i -S web-animations-js

然后，在使用纸张下拉菜单之前导入它，像这样：

Then, import it before using the paper-dropdown-menu, like this:

Firefox：

import 'web-animations-js/web-animations-next-lite.min.js';

演示1

Chrome

<script src="./node_modules/web-animations-js/web-animations-next-lite.min.js"></script>

注意：不幸的是，在Chrome中， web-animations-next-lite。必须使用< script> 标记导入min.js 文件（例如，在 index.html ）。这适用于Firefox和Chrome。

Note: Unfortunately in Chrome, the web-animations-next-lite.min.js file must be imported with a <script> tag (e.g., in index.html). This works in both Firefox and Chrome.

demo 2

这篇关于聚合物3.0未被引用的参考错误在纸张下拉单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！