时间戳

首页 > 解决方案 > 纸张下拉单击上的聚合物 3.0 未捕获参考错误

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

问题描述

导入这些后：

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 文件中，因此无法正常工作。

作为说明，我没有使用凉亭或流星。

标签： javascriptpolymer

解决方案

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

npm i -S web-animations-js

然后，在使用 之前将其导入paper-dropdown-menu，如下所示：

火狐：

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

演示 1

铬合金

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

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

演示 2

推荐阅读