聚合物 3.0 未捕获纸张下拉单击上的参考错误

Question

导入这些后：

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

下拉菜单单独放置时不会产生错误，但是单击时（将重复多次单击）它将生成它。

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)

这是我正在尝试运行的代码：

<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。从其他问题中查看类似问题，他们的解决方案是将网络动画导入他们的 html 文件，但我的代码在 js 文件中，因此无法正常工作。

请注意，我没有使用 bower 或 meteor。

Answer 1

霓虹灯动画已正式弃用，无论如何您仍然可以从 https://www.npmjs.com/package/@polymer/neon-animation

要从 npm 将 em 导入到您的 polymer3 项目中：

npm install --save @polymer/neon-animation

Answer 2

Web Animations polyfill 解决了您看到的错误。从 npm:

安装

npm i -S web-animations-js

然后，在使用paper-dropdown-menu之前导入它，像这样：

Firefox:

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

demo 1

Chrome

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

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

demo 2

Answer 3

在 package.json "dependencies"

   "web-animations-js": "^2.3.1"

在 polymer.json "extraDependencies"

   "node_modules/web-animations-js/*.js"

在 index.html 之后 webcomponents-loader 脚本

   <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
   <script src="node_modules/web-animations-js/web-animations-next.min.js"></script>

直接在我的元素中将任何 web-animation-js polyfill 版本作为 javascript 模块导入并使用 Polymer CLI 构建产生了主题错误。在 webcomponents 加载器脚本为我修复错误后，在 index.html 中同步加载 web-animations-next.min.js polyfill 版本

Answer 4

您需要安装霓虹灯动画元素。这样做：

npm install --save @polymer/neon-animation

这将在您的 package.json 中添加霓虹灯动画依赖项并安装它。添加 web-animations-js polyfill：

npm install --save web-animations-js

完成这两个安装后。在负责下拉列表的视图中。添加以下代码：

 import {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js';

您将不得不使用 mixinbehavior，因此将其添加为导入：

 import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';

现在假设 class 的名称是 MyView1，您将在其中呈现此下拉菜单，请执行以下操作：

class MyView1 extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) {

现在我们需要在 web-components-loader 之后添加 polyfill web-animations-js 到 index.html:

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="node_modules/web-animations-js/web-animations-next.min.js"></script>

这绝对有用！

Answer 5

关于 MKant 之前的回答，如果您有一个 ASP.net 站点，您需要将 polyfill 的最后两个脚本标记添加到您的 cshtml 文件或任何调用您的 Polymer 元素的文件中.如果将它们添加到模块 template 代码中，它将不起作用。

聚合物 3.0 未捕获纸张下拉单击上的参考错误

polymer 3.0 uncaught reference error on paper drop-down click

javascript

polymer