聚合物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.从其他问题看类似的问题,他们的解决方案是将web动画导入到他们的html文件中,但我的代码是在js文件中,因此不起作用.

作为一个说明我不使用凉亭或流星.

Answer 1

该网页动画填充工具可以解决您看到的错误.从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

Answer 2

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

npm install --save @polymer/neon-animation

这将在 package.json 中添加 neon-animation 依赖项并安装它。添加 web-animations-js 填充：

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';

现在假设类的名称是 MyView1，您要在其中呈现此下拉列表，请执行以下操作：

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

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

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

这肯定会起作用！